shield_lock
金大哥
← 返回 Skill 列表
extension
分类: 开发与工程API Key 暂未确认

awesome-design-md

Apply real-world design systems from 84 famous websites (Apple, Stripe, Linear, Spotify, Ferrari, Notion...) as DESIGN.md specs for AI-generated UI. Use when the user wants a page or interface to look like a specific brand/site, requests a DESIGN.md for their project, asks about brand design languages/tokens, or describes a visual style that matches one of the indexed sites.

person作者: kissstronghubModelScope
download下载资源包

Awesome DESIGN.md Skill

Access a library of 84 DESIGN.md design-system documents extracted from real websites. Each file captures a site's full visual language (colors, typography, components, spacing, do's/don'ts) so generated UI stays visually consistent with that brand.

Base directory for this skill: D:\codes\opencode\text2voice.opencode\skills\awesome-design-md

Workflow

Step 1: Match the target design

  1. Identify the site or style the user wants:
    • Explicit brand named (e.g. "像 Apple 一样", "Stripe style") → use that site directly.
    • Style described but no brand named → consult the Matching by Style Traits table in references/index.md and pick 1-3 candidates.
  2. If multiple candidates fit equally well, briefly list them and let the user choose.
  3. Confirm the chosen site folder name (e.g. apple, linear.app, stripe).

Done when: a single site folder is selected (or the user confirmed among options).

Step 2: Read the DESIGN.md

Read references/design-md/<folder>/DESIGN.md in full. Extract:

  • Colors: semantic roles, hex values, accent vs. neutral vs. surface tokens
  • Typography: font families, scale hierarchy, weights, letter-spacing rules
  • Components: buttons, cards, inputs, navigation — including states
  • Layout: spacing scale, grid, whitespace philosophy
  • Do's and Don'ts: guardrails that keep the output on-brand

Done when: the key tokens and rules needed for the requested UI are loaded in context.

Step 3: Apply to the generated UI

When writing HTML/CSS/React/etc.:

  1. Use the exact hex values and font stacks from the DESIGN.md — do not invent substitute palettes.
  2. Follow the component recipes (radius, borders, shadows, hover states) rather than generic Tailwind defaults.
  3. Respect the Do's and Don'ts section strictly; these are the strongest anti-pattern guards.
  4. Match the layout philosophy (density, whitespace, grid) of the source site.
  5. If a required token is missing from the DESIGN.md, infer it from the nearest related token and stay consistent.

Done when: the generated code only uses tokens traceable to the DESIGN.md.

Step 4: Verify and report

  1. Sanity-check the output against the source site's essence: correct accent color? correct type mood? correct density?
  2. Tell the user which DESIGN.md was applied (site + folder) and list the main tokens used (accent hex, font family, radius scale).
  3. If the user wants adjustments, reuse the same DESIGN.md rather than switching styles mid-stream.

Done when: the user knows exactly which design system was applied and can request refinements.

Quick Reference

| Need | Action | |---|---| | Full site list + categories | Read references/index.md | | Style keyword matching | Read the "Matching by Style Traits" table in references/index.md | | Site design spec | Read references/design-md/<folder>/DESIGN.md | | Site not in library (84 total) | Suggest a similar indexed site, or point to https://getdesign.md/request |

Constraints

  • Never mix tokens from two different sites unless the user explicitly asks for a hybrid.
  • Do not invent colors, fonts, or spacing values that contradict the DESIGN.md.
  • The library is for generating new UI inspired by the design language; it does not grant permission to copy copyrighted logos, imagery, or proprietary assets.
  • Folder names are case-sensitive and match the index exactly (e.g. linear.app, mistral.ai, dell-1996).