Design For Beauty

Build or restyle interfaces with a curated library of bundled DESIGN.md references extracted from public websites. Use when the user asks for a landing page,...

Security Scan

The skill's behavior mostly matches a design-reference assistant, but it claims bundled local reference files that are not present in the package and gives file-system instructions that therefore don't add up — this mismatch warrants caution.

Purpose & Capability

The skill's stated purpose (turn design references into implementation-ready UI direction) is coherent with the instructions, but the SKILL.md repeatedly refers to bundled reference files under references/design-md/ (sourced from 'awesome-design-md') while the package manifest contains only SKILL.md and no references. That is an important mismatch: either the runtime environment must supply those files (not documented), or the skill is incomplete. The SKILL.md also suggests using ripgrep (rg) for searching but the skill does not declare that binary as required.

Instruction Scope

The instructions tell the agent to read specific local files and to 'open' DESIGN.md files in references/ and to 'start from the catalog' — actions that require the referenced files to exist. Because those files are not bundled, the instructions could prompt the agent to fetch remote data or fail. The instructions themselves do not request any unrelated system secrets or broad data exfiltration, and the commands/examples shown are benign, but the implicit expectation of local data that isn't present is a scope/integrity problem.

Install Mechanism

This is an instruction-only skill with no install spec and no code files, which minimizes installation risk. The search tips include a shell example using 'rg' but no install or binary requirements are declared.

Credentials

The skill requests no environment variables, credentials, or config paths — that's proportionate. However, it references external content ('awesome-design-md' and public websites) without documenting where or how those references will be supplied, which raises questions about licensing and whether the skill will attempt to download content at runtime (possible network access).

Persistence & Privilege

always is false and the skill is user-invocable; it does not request persistent or elevated privileges and does not attempt to modify other skills or system config in the provided instructions.

What to consider before installing

Before installing or enabling this skill, ask the provider these questions: (1) Where are the referenced files (references/catalog.md and references/design-md/...) supposed to come from? The package you provided contains only SKILL.md, so the runtime must supply the references or the skill will fail or try to fetch them. (2) If the skill will fetch references from the internet, confirm exactly what URLs it will contact and get explicit user consent before any network retrieval — including an explanation of licensing/attribution for scraped public-site content (copyright risk). (3) Confirm whether ripgrep (rg) or other tooling is required at runtime and whether there are fallback behaviors if binaries or references are absent. (4) Because the skill reads local files, verify that no sensitive files will be placed in the references/ path. If you plan to proceed, request an updated package that either includes the bundled references or documents the runtime source and network access behavior. Without that, the skill is incomplete and should be treated cautiously.

Use this skill to turn real-world design references into implementation-ready UI direction.

The bundled references come from awesome-design-md and live under references/design-md/. Do not read everything at once. Start from the catalog, shortlist, then load only the most relevant files.

Start Here

1. Read references/catalog.md.
2. Pick 1-3 reference brands.
3. Open only the matching references/design-md/<slug>/DESIGN.md files.
4. Translate the chosen reference into project-specific decisions, not a blind clone.

When To Use This Skill

• The user names a brand or product style: Stripe, Apple, Linear, Notion, Airbnb, Tesla.
• The user wants a visual direction without naming a brand: premium minimal, editorial, developer-first, playful productivity, enterprise clean.
• The user asks for a redesign, restyle, landing page, dashboard, design system, or front-end polish.
• The user wants multiple design directions and tradeoffs before implementation.

Routing Rules

If the user names a brand

• Treat that brand as the primary reference.
• Load its DESIGN.md directly.
• If the user names multiple brands, keep one primary reference for typography, spacing, and layout rhythm.
• Use at most one secondary reference for accent color, motion, or component mood unless the user explicitly asks for a broader blend.

If the user gives only a vibe

• Search references/catalog.md first.
• Shortlist 2-4 references by category, tone, density, contrast, and interaction style.
• Then read only the 1-3 best matching DESIGN.md files.

If the project already has a design system

• Preserve existing product patterns unless the user explicitly wants a rebrand.
• Borrow mood, spacing, contrast, or hierarchy instead of overwriting the whole system.

Synthesis Workflow

1. Extract the reference system

Pull out the parts that actually matter for implementation:

• visual atmosphere
• color roles and contrast pattern
• typography hierarchy and font character
• spacing, radius, borders, and elevation
• component behavior
• layout density and page rhythm
• do/don't constraints

2. Adapt to the real project

• Keep the product's content model, IA, and accessibility requirements.
• If a reference uses proprietary fonts or art direction, emulate the rhythm with available substitutes and say so.
• Preserve focus states, semantic HTML, readable contrast, and reasonable touch targets.
• Favor project fit over pixel mimicry.

3. Produce implementation-ready output

Depending on the task, convert the reference into one or more of these:

• a concise design brief
• a shortlist of directions with tradeoffs
• CSS variables / design tokens
• component styling rules
• actual front-end code

Conflict Resolution For Multi-Reference Blends

• Primary reference owns typography, spacing, and structural rhythm.
• Secondary reference may influence color, imagery, or motion.
• Tertiary influence should be minor and explicit.
• If the blend starts to feel incoherent, simplify back to one primary direction.

Deliverable Checklist

Before you finish, make sure you:

• name which references you used
• identify the primary reference
• call out any font or asset substitutions
• keep the output accessible and product-appropriate
• preserve the strongest "do" and avoid the biggest "don't" from the reference

File Map

• references/catalog.md - human-readable index of all references
• references/catalog.json - machine-readable index
• references/design-md/<slug>/DESIGN.md - full design reference files

Search Tips

rg -n "monochrome|gradient|editorial|premium|dashboard|developer|playful" references/catalog.md

Example Requests

• "Use Stripe as the base direction for this pricing page."
• "Give me 3 directions for an AI developer tool: one like Linear, one like Vercel, one like Apple."
• "参考 Notion 和 Airtable，做一个更温和的 B2B 数据产品首页。"