48K Star Repository: 66 систем для остановки работы ИИ
Решите проблему написания интерфейса интерфейса AI: eyesome-design-md
ИИ, в чем проблема с передним концом?UI уродливый.Я не знаю. Фронтальный интерфейс, созданный AI Agent, часто не имеет чувства дизайна, цветовая гамма спутана, а макет не согласован.
Этот складВсе кончено.Другие организаторы 66 файлов DESIGN.mdСоздайте своего ИИ-агента напрямуюТочный UI уровня пикселейЯ не знаю.
Что такое DESSIGN.md?
DESIGN.md Новая концепция Google Stitch:
- Система дизайна чистого текстаМаркдаун определение файла UI спецификации дизайна
- LLM легче всего понять.Markdown - лучший формат для LLM
- Не нужно, Фигма.Нет экспорта файлов дизайна, нет необходимости в схеме JSON
- ВключитьПоместите его в корневой каталог, сразу поймет AI Agent
Сравнение:
| Документация | Кто будет читать? | Определить что? |
|---|---|---|
| АГЕНТЫ.МД | Разделы | Как построить проект |
| DESIGN.md | Проектные акты | Как должен быть представлен проект |
66 Проектные системы
Доступный дизайн-мд66 доступных файлов DESIGN.mdВо всех областях:
AI Corporation
- Claude, OpenAI, Cohere, Eleven Labs, Mistral AI, XAI и др.
- Google Gemini, Together AI, VoltAgent и др.
Инструмент разработчика
- Vercel, Cursor, Raycast, Warp, Loveable, Expo
- Supabese, Stanley, Linear, PostHog, Sanity и др.
Финансовые технологии
- Стрип, Coinbase, Binance, Revolut, Wise
- Kraken, Airtable и др.
Сайт бренда
- Apple, Tesla, Nike, BMW, Ferrari, Lamborghini
- Spotify, Airbnb, Pinterst, Uber, The Verge и др.
Дизайнерский инструмент
- Figma, Framer, Miro, Webflow, Notion и др.
Используйте методы
Три шага.:
# 1. 复制 DESIGN.md 到项目根目录 # 比如：复制 vercel/DESIGN.md 到你的项目 # 2. 告诉 AI Agent 使用这个设计 "用 DESIGN.md 的设计规范，帮我生成一个首页" # 3. AI Agent 生成像素级精确的 UI
Вот так! Агент автоматически:
- Читать цветовую инструкцию DESSIGN.md
- Применяйте правильные шрифты и символы
- Используйте правильное расстояние и макет
- Генерировать компоненты, которые соответствуют системе проектирования
Что содержит DESSIGN.md?
Каждый DESIGN.md содержит9 полных глав кода дизайна:
| Глава | Содержание |
|---|---|
| Визуальные темы | Атмосфера, плотность, философия дизайна. |
| 2. Цветовые нормы | Семантическое имя + Hex + функция |
| 3. Правила шрифта | Семейство шрифтов, полная иерархия |
| 4. Стили компонентов | Кнопки, карты, входные рамки, навигация и т.д. |
| 5.Принцип планировки | Соотношение пространства, сетка, пустая философия |
| 6 Глубина | Теневая система, уровень поверхности |
| 7. Нормативное руководство | Дизайн столбцов и обратный режим |
| Ответ | Точки разрыва, сенсорные цели, стратегии складывания |
| Агент Хинт | Быстрая цветовая ссылка, готовый намек |
Каждый сайт содержит
- DESIGN.mdДокумент системы проектирования (AI Agent read)
- Прости.Визуальный предварительный просмотр (цвет, шрифт, компоненты)
- Я не знаю.Оригинальное название: Dark Mode Preview
Пример системы проектирования
Несколько классических примеров:
Версел.
- Черно-белая точность, шрифт Geist
- Экстремальная простота, приоритет кода
Яблоко.
- Большое количество белых шрифтов SF Pro
- Кинофильмы, продвинутые чувства.
Стрип.
- Сигнальный фиолетовый градиент
- Вес 300.
Тесла.
- Крайне уменьшенный дизайн
- Полноэкранная фотография, Universal Sans
Резюме
Я не знаю, что сказать. Измените полностью то, как ИИ пишет фронтенд:
- 66 доступных файлов DESIGN.md
- Охват компаний ИИ, инструментов разработчиков, финансов, брендов и т.д.
- Чистый формат Markdown, лучше всего понятный LLM
- Достаточно трех шагов: Copy Zoom To Project Zoom AI Generate Perfect UI
- Google Stitch официально поддерживается
С тех пор ИИ писал, что передний конец больше не уродлив.
GitHub:https://github.com/VoltAgent/awasome-design-md
Google Stitch:https://stitch.withgoogle.com/docs/design-md/overview/