YardonYanYardonYan/ui-design-skills/skills/foundations/design-md-library/SKILL.md

design-md-library

Skill0 starsChanged yesterdayApache-2.0View on GitHub

84 家网站的设计语言分析库（DESIGN.md）查询入口。当需要具体视觉 token 而不是形容词时使用：定落地页/后台/品牌页的配色与字号、要"像 Linear 那样""Airbnb 那种暖白+单一品牌色"的效果、给现有页面做视觉升级、判断某品牌的圆角/间距/字重取值、写 DESIGN.md 时需要对照结构。语料在 ~/.teamai/docs/design-md/<品牌>/DESIGN.md，来自 VoltAgent/awesome-design-md。关键词：设计语言、DESIGN.md、配色 token、字体搭配、参考站风格、视觉基线。

4 other projects use a version of this.

Adopted by

Most recently taken up by

Chrisxtain/claude-skillstheir own version, first seen Nov 15, 2026
Makkov-design/makkov-harnesstheir own version, first seen Nov 15, 2026
gandolh/my-personal-skillstheir own version, first seen Oct 17, 2026
Taltal190002-mov/claude-skillstheir own version, first seen May 18, 2026

Other versions4 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 4
Makkov-design/makkov-harness★ 8same name
Taltal190002-mov/claude-skills★ 2same name
Chrisxtain/claude-skills★ 0same name
gandolh/my-personal-skills★ 0same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository73 other files it gives its agents.
- skills/components/components-build/AGENTS.mdAGENTS.md
- ui-design-skillsSkill
- assistant-uiSkill
- baoyu-designSkill
- bootstrapSkill
- canvas-designSkill
- components-buildSkill
- cult-uiSkill
- ecommerce-image-workflowSkill
- hatch-petSkill
- icon-systemSkill
- image-enhancerSkill
- lieflat-chartsSkill
- luobo-designSkill
- mockup-device-3dSkill
- ricoui-blocksSkill
- shader-devSkill
- spotkitSkill
- threejsSkill
- admin-form-schemaSkill
- admin-ia-patternsSkill
- dashboardSkill
- enterprise-adminSkill
- iga-pagesSkill
- live-dashboardSkill
- a11y-rulesSkill
- ai-chat-patternsSkill
- art-directionSkill
- brand-extractSkill
- brand-guidelinesSkill
- brandkitSkill
- design-vocabularySkill
- emil-design-engSkill
- flexoki-paletteSkill
- frontend-specSkill
- hallmarkSkill
- motion-craftSkill
- motion-promptsSkill
- oil-uiSkill
- reference-design-contractSkill
- review-animationsSkill
- ui-ux-pro-maxSkill
- unslopSkill
- web-design-guidelinesSkill
- mobile-appSkill
- mobile-design-specSkill
- mobile-onboardingSkill
- agent-browserSkill
- chrome-devtoolsSkill
- html-to-pdfSkill
- json-canvasSkill
- markdown-renderer-fixSkill
- wechat-mp-publishSkill
- card-xiaohongshuSkill
- docs-pageSkill
- faq-pageSkill
- frontend-designSkill
- html-skill-effectivenessSkill
- image-to-codeSkill
- magazine-posterSkill
- The first 60 shown.

The file

Create a free account to mount

Files

SKILL.md

设计语言库（84 个 DESIGN.md）

什么时候用它

要的是可写进 CSS 的具体值，不是"高级感""简洁"这类形容词。典型：做落地页要定色板和字阶、要复刻某个产品的视觉气质、给现有页面做视觉升级、给项目写 DESIGN.md 需要参照结构。

怎么查

ls ~/.teamai/docs/design-md              # 看有哪些品牌
cat ~/.teamai/docs/design-md/linear.app/DESIGN.md   # 每个文件 400-550 行

每个 DESIGN.md 的 frontmatter 是结构化 token（colors: / 字体与字阶 / rounded: / 间距），正文是这套语言为什么这样组织的解释。

硬规矩：不许凭记忆写某品牌的色值、字号、圆角。要用就打开文件读，并在结论里给出文件路径。记忆里的 "Stripe 是紫色" 这类印象一律不算依据。

84 个条目按用途分组

开发者工具与后台：linear.app clickhouse supabase sentry vercel raycast warp opencode.ai cursor figma framer webflow sanity mintlify miro posthog resend composio mongodb hashicorp oracle sap dell-1996 hp ibm
AI 与模型：claude mistral.ai ollama runwayml cohere minimax elevenlabs x.ai together.ai replicate lovable superhuman jobright
消费与金融：airbnb uber pinterest spotify stripe coinbase revolut mercury wise kraken mastercard binance 1win mintlify cal notion slack intercom
汽车与硬件：tesla bmw bmw-m bugatti lamborghini renault ferrari spacex nvidia apple dji oura nintendo-2001
媒体与零售：aljazeera theverge wired nike starbucks shopify playstation vodafone mydealz nerdwallet airtable clay zapier expo meta voltagent webflow

选参照对象要跨组挑两三个对照，别只看一个站就定色板。

与同仓其它设计 skill 的分工

要选型和数据（79 风格 / 192 配色 / 74 字体搭配 / UX 规则）→ ui-ux-pro-max
要反 AI-slop 的底线和审查清单 → hallmark、web-design-guidelines、review-animations
要把"我喜欢的感觉"落成可复用契约 → reference-design-contract
要真实品牌的现成 token 取值 → 本库

四者不互相替代：本库提供的是别人已经付过学费的具体数值，不是方法论。

加新品牌

在 ~/.teamai/docs/design-md/<品牌>/DESIGN.md 按同样的 frontmatter 结构写，或从 https://getdesign.md/<品牌>/design-md 取，然后 teamai push（docs 走仓库 docs/ 目录，teamai pull 下发到各机器）。

上游：https://github.com/VoltAgent/awesome-design-md，许可见 docs/design-md-LICENSE；本库是它的快照副本，2026-10-26 收录 84 条。

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free