Design.md

Source: https://github.com/VoltAgent/awesome-design-md at f6961238d5cd
License: MIT
Read the English original

This edition is an AI-assisted translation.

개발자 중심 웹 사이트에서 Design.md 분석의 수집.

DESIGN.md 엄선 모음

프로젝트에 DESIGN.md를 복사하면 AI 에이전트에게 “이처럼 보이는 페이지를 만들”고 디자인 언어로 시각적으로 일관성있는 고품질의 UI를 생성합니다.

분석 패턴, 토큰 및 규칙을 포함한 실제 디자인 깊이로 제작되었습니다. 고품질의 UI 생성을 위해 표면 수준 출력이 아닙니다.

DESIGN.md란?

DESIGN.md Google Stitch에 소개 된 새로운 개념입니다. AI Agent가 일관된 UI를 생성하는 일반 텍스트 디자인 시스템 문서.

그것은 단지 마크 다운 파일입니다. 아니 Figma 수출, 아니 JSON schemas, 특별한 장식 없음. 프로젝트 루트에 드롭하고 AI 코딩 에이전트 또는 Google Stitch는 즉시 UI가 어떻게 보일지 이해합니다. Markdown은 LLMs가 가장 잘 읽는 형식이므로 파싱이나 구성에 아무것도 없습니다.

파일 형식	누가 그것을 읽는다	정의하는 것
AGENTS.md	Coding 대리인	프로젝트 구축 방법
DESIGN.md	회사소개	프로젝트가 어떻게 보일까요?

**이 repo는 ready-to-use DESIGN.md 파일을 제공합니다.**실제 웹 사이트에서 추출.

DESIGN.md 요청하기

당신은 할 수DESIGN.md 요청 개인 요청을 포함하여 특정 웹 사이트를 위해 독점적으로 전달됩니다.

AI 디자인 및 개발 생태계 도구

당신은 AI를 가진 제품을 발송합니다, 그러나 각 발사는 아직도 그것에 관하여 아무도 포스트 때문에 조용히 죽습니다.EveryFeed AI Assistant를 35개 이상의 채널을 통해 초안, 일정 및 게시하는 소셜 작업 공간으로 연결하십시오. - 에이전시 없음, 마케팅 고용.

👉 AI 코딩 에이전트와 웹 빌더로 UI를 만드는 개발자, 디자이너, 바이브 코더와 함께 제품을 소개하세요. GitHub에서 #150로 랭크됩니다. 개발자, 디자이너 및 vibecoders가 사용하는 커뮤니티 리소스.

컬렉션

AI 및 LLM 플랫폼

• Claude - Anthropic의 AI 조수. 따뜻한 테라코타 악센트, 깨끗한 편집 레이아웃
• Cohere - 기업 AI 플랫폼. Vibrant gradients, 데이터 풍부한 대시보드 미적
• ElevenLabs - AI 음성 플랫폼. Dark Cinematic UI, 오디오 파형 미학
• Minimax - AI 모델 공급자. neon 악센트를 가진 대담한 어두운 공용영역
• Mistral AI - 개방 중량 LLM 공급자. 프랑스어 엔지니어링 미니멀리즘, 보라색 톤
• Ollama - 로컬 LLM을 실행합니다. 단색 단색 단색
• OpenCode AI - AI 코딩 플랫폼. Developer-centric 어두운 테마
• Replicate - API를 통해 ML 모델 실행. 깨끗한 흰색 캔버스, 코드-forward
• Runway - 편집 영화 축제 미학을 가진 AI 창조적인 공구 플랫폼 - 영화 어두운 영웅, 종이 백색 독서 밴드, 단 하나 독점적인 산 및 순수한 까만 알약 CTAs.
• Together AI - Open-source AI 인프라. 기술, 청사진 스타일 디자인
• VoltAgent - AI 에이전트 프레임 워크. Void-black 화포, 에메랄드 악센트, 맨끝 고유
• xAI - Elon Musk의 AI 실험실. 스타크 모노크롬, futuristic 미니멀

개발자 도구 및 IDE

• Cursor - AI-First 코드 편집기. Sleek 어두운 인터페이스, gradient 악센트
• Expo - React Native 플랫폼. 어두운 테마, 단단한 Letter-spacing, 코드 중심
• Lovable - AI 풀 스택 빌더. 개인정보 보호정책
• Raycast - 생산력 발사기. Sleek 어두운 크롬, 활기찬 gradient 악센트
• Superhuman - 빠른 이메일 클라이언트. 프리미엄 다크 UI, 키보드, 퍼플 글로로우
• Vercel - Frontend 배포 플랫폼. 검정과 흰색 정밀도, Geist 글꼴
• Warp - 현대 맨끝. Dark IDE-like 인터페이스, 블록 기반 명령 UI

백엔드, 데이터베이스 및 DevOps

• ClickHouse - 빠른 분석 데이터베이스. Yellow-accented, 기술 문서 스타일
• Composio - Tool 통합 플랫폼. 다채로운 통합 아이콘과 현대 다크
• HashiCorp - 인프라 자동화. 기업 청결한, 검정 및 백색
• MongoDB - 문서 데이터베이스. Green Leaf 브랜딩, 개발자 문서 초점
• PostHog - 제품 분석. Playful hedgehog 브랜딩, 개발자 친화적 인 다크 UI
• Sanity - 어두운 첫 번째 편집 마케팅 표면이있는 헤드리스 콘텐츠 플랫폼 - 112px 디스플레이 유형, IBM Plex 모노 기술 눈썹 및 가장 높은 선명한 CTA에 관련된 단일 산호 빨간 악센트.
• Sentry - 오류 모니터링. Dark 대쉬보드, data-dense, 핑크 퍼플 악센트
• Supabase - Open-source Firebase 대안. 다크 에메랄드 테마, code-first

생산성 및 SaaS

• Cal.com - 오픈 소스 스케줄링. Clean neutral UI, 개발자 중심의 단순성
• Intercom - 고객 메시지. 친절한 파란 팔레트, 대화 UI 본
• Linear - 엔지니어를 위한 프로젝트 관리. Ultra-minimal, 정확하고, 자주색 악센트
• Mintlify - 문서 플랫폼. 깨끗하고 녹색, 독서 최적화
• Notion - 올인원 작업 공간. 따뜻한 미니멀, serif headings, 부드러운 표면
• Resend - 개발자를 위한 Email API. 미니멀 어두운 테마, monospace 악센트
• Zapier - 자동화 플랫폼. 따뜻한 오렌지, 친절한 일러스트 구동

디자인 및 창작 도구

• Airtable - Spreadsheet-database 하이브리드. , 친절한, Structured 자료 미학
• Clay - 창조적인 기관. 유기 모양, 연약한 gradients의 예술 지시한 배치
• Figma - Collaborative 디자인 도구. Vibrant 다색, 장난 아직 전문가
• Framer - 웹 사이트 빌더. 대담한 검정과 파랗고, 동의 첫번째, 디자인 forward
• Miro - 비주얼 협업. 밝은 노란색 악센트, 무한한 캔버스 미학
• Webflow - 웹 빌더 Blue-accented, 광택 마케팅 사이트 미학

핀테크 및 암호화폐

• Binance - 암호화 교환. Monochrome에 Bold Binance Yellow, 거래 바닥 긴급
• Coinbase - 암호화 교환. 깨끗한 파란색 정체성, 신뢰 중심의 기관 느낌
• Kraken - Crypto 거래 플랫폼. Purple-accented Dark UI, 데이터 밀도 대시보드
• Mastercard - 글로벌 결제 네트워크. 따뜻한 크림 캔버스, 궤도 알약 모양, 편집 따뜻한
• Revolut - 디지털 은행. Sleek 어두운 공용영역, gradient 카드, fintech 정밀도
• Stripe - 결제 인프라. Signature Purple gradients, 무게-300 우아함
• Wise - 국제 송금. 밝은 녹색 악센트, 친절하고 명확한

전자상거래 및 소매

• Airbnb - 여행 시장. 따뜻한 산호 악센트, 사진 구동, 둥근 UI
• Meta - 기술 소매점. 사진 - 첫째, 이진 빛 / 어두운 표면, 메타 블루 CTA
• Nike - Athletic 소매. Monochrome UI, 대규모 uppercase Futura, 전체 사진
• Shopify - E-commerce 플랫폼. Dark-First 영화, neon 녹색 악센트, 초경량 표시 유형
• Starbucks - 커피 소매 주력. 4 층 지구 녹색 시스템, 따뜻한 크림 캔버스, 독점적 인 SoDoSans 전기

미디어 및 소비자 기술

• Apple - 가전제품 프리미엄 화이트 공간, SF Pro, 영화 이미지
• HP - PC와 인쇄 기계 제작자. 순수한 백색 화포, HP 전기 파란 신호 CTA의 기하학 Forma DJR 마이크로, 파란 chevron 훈장
• IBM - 기업 기술. 탄소 디자인 시스템, 구조화 된 파란색 팔레트
• NVIDIA - GPU 컴퓨팅. 녹색 까만 에너지, 기술적인 힘 미학
• Pinterest - Visual discovery 플랫폼. 레드 악센트, 메이슨 그리드, 이미지 우선
• PlayStation - 게임 콘솔 소매. 세 표면 채널 레이아웃, cyan hover-scale 상호 작용
• SpaceX - 우주 기술. Stark 검은 색과 흰색, 전체 화려한 이미지, futuristic
• Spotify - 음악 스트리밍. 어두운, 대담한 유형, 앨범 구동에 Vibrant 녹색
• The Verge - 기술 편집 매체. 산성 분 및 자외선 악센트, Manuka 디스플레이 유형
• Uber - Mobility 플랫폼. 대담한 검정과 백색, 단단한 유형, 도시 에너지
• Vodafone - 글로벌 텔레콤 브랜드 기념물 상부 표시, Vodafone 빨간 장 밴드
• WIRED - 기술 잡지. 종이 흰색 광대 시트 밀도, 사용자 정의 serif, 잉크 블루 링크

자동차

• BMW - 럭셔리 자동차. 다크 프리미엄 표면, 정밀 독일 공학 미학
• BMW M - 성능 자동차. Motorsport-inspired 대조, M 컬러 악센트, 정밀 구동 레이아웃
• Bugatti - 고급 하이퍼카. 영화관 검정 화포, monochrome austerity, 기념비 전시 유형
• Ferrari - 럭셔리 자동차. Chiaroscuro 검정색 편집, Ferrari 빨강 와 극단적인 sparseness
• Lamborghini - 럭셔리 자동차. 진정한 블랙 대성당, 금 악센트, LamboType 사용자 정의 Neo-Grotesk
• Renault - 프랑스 자동차. Vivid aurora gradients, NouvelR 독점 유형 얼굴, 0 반경 버튼
• Tesla - 전기 자동차. Radical subtraction, 영화 full-viewport 사진, 유니버설 산

레트로 웹 · DESIGN.md 향수

토요일 시리즈 - 1990 년대 웹에서 추출 한 DESIGN.md 파일. AI 에이전트를 말하면 기간의 빈티지 UI를 만들 수 있습니다.

• Dell (1996) - 카탈로그-era 기업 웹. 리터 블랙 페이지 프레임, 플랫 컬러 블록 “리본 카드”, 춘키 헬베티카-블랙 타이틀 시간 로마 몸, 손 커트 GIF 스티커 (NEW! 파열, 상 물개, 베벨 제품 사진).
• Nintendo.com (2001) - Y2K “console 크롬”웹. 솔질한 관통되는 금속 패널, 반돌에 넣어진 탄소 nav glowing 호박색은, 회로판 영웅 분야에 Arial 까만 상자 예술 낱말을 윤곽을 그렸습니다, 및 화소 마리오 환영 거품.

각 DESIGN.md에 포함된 내용

모든 파일은 다음과 같습니다.Stitch DESIGN.md 형식 장시간 단면도로:

#	이름 *	어떤 캡처
1	비주얼 테마 & Atmosphere	Mood, 밀도, 디자인 철학
2	색깔 팔레트 & 역할	Semantic 이름 + hex + 기능적인 역할
3	Typography 규칙	폰트 가족, 전체 hierarchy 테이블
4	구성 요소 스타일링	버튼, 카드, 입력, 네비게이션
5	배치 원리	간격 가늠자, 격자, whitespace 철학
6	깊이 & 고각	그림자 체계, 표면 hierarchy
7	와 돈 ts	디자인 난간과 반대로 patterns
8	책임감	Breakpoints, 터치 타겟, 충돌 전략
9	에이전트 Prompt 가이드	빠른 색상 참조, ready-to-use 신속한

각 사이트 포함:

파일 형식	제품정보
DESIGN.md	디자인 시스템 (무엇 에이전트 읽기)
preview.html	색상 견본, 유형 가늠자, 단추, 카드를 보여주는 시각적인 카탈로그
preview-dark.html	어두운 표면을 가진 동일한 카탈로그

사용 방법

1. 사이트 복사DESIGN.md프로젝트 루트
2. AI 에이전트를 사용하여 그것을 사용합니다.

기여하기

이름 *협력.md 자주 묻는 질문

• 기존 파일: 잘못된 색상, 누락된 토큰, 약한 설명 수정
• 문제 보고: 뭔가가 꺼져 있는지 알려주세요.

PR을 개설하기 전에자주 묻는 질문 당신의 아이디어를 토론하고 maintainers에서 피드백을 얻는 첫번째.

라이선스

MIT 라이센스 - 참조구매하기

이 저장소는 공공 웹 사이트에서 추출 된 디자인 시스템 문서의 큐레이터 컬렉션입니다. 모든 DESIGN.md 파일은 보증없이 “as는” 제공됩니다. 추출된 디자인 토큰은 공개적으로 눈에 보이는 CSS 값을 나타냅니다. 우리는 사이트의 시각적 정체성의 소유권을 주장하지 않습니다. 이 문서는 AI 에이전트가 일관된 UI를 생성합니다.