메뉴
Discovery and integration of professional design systems from multiple platforms (designmd.ai, designmd.app, getdesign.md, designmd.me). Use this when starting a project, updating UI, or requesting specific brand "looks" (Stripe, Vercel, etc.).
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Audit and upgrade an EXISTING website or app to premium quality without a rewrite. Use when the user asks to redesign, revamp, refresh, polish, improve, modernize, or de-slop an existing frontend or codebase — it identifies generic AI design patterns and applies high-end standards while preserving functionality and the current stack (any CSS framework or vanilla CSS). Triggers: redesign, revamp, upgrade UI, improve design, polish existing site, make it look better, modernize, 리디자인, 리뉴얼, 개선, 다듬기, 손보기, リデザイン, 改善, 刷新. Do NOT use for building a NEW interface from scratch — use the frontend-design skill for that.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Carve guardrail-adjacent items out of scope with safe alternatives before risk-adjacent work starts, then run the safe remainder at full strength in a fresh subagent that only ever sees the carved prompt, never the risky input. Use when a task includes stealth, scraping, privacy, IP, policy, licensing, security, or other safety-adjacent material that could be silently dropped, over-elaborated, or needlessly diluted. Fires on the impulse, not only the topic: the moment you notice yourself about to hedge, soften, silently skip, or brace for a refusal, carve before you execute.
Run repeated build -> QA -> retro -> re0-work cycles while preserving learning and letting code die. Use for long agentic projects where progress must be measured by quality-cleared templates, reusable modules, and eliminated anti-patterns rather than hours spent or features accumulated.
Audit any eval, metric, experiment, or benchmark for leakage — does external ground-truth enter independently, or are the model, scorer, and designer just confirming a result no outside truth ever produced? Use before trusting any 'how we'll know it worked' — an A/B, a holdout, a score, a validation — and whenever a result feels too clean or self-confirming. Walks an 8-pattern leakage taxonomy and returns only the patterns that fire, each with an independence fix. Read-only.
Read the live cycle state and return the single highest-leverage next best action, not a menu. Use when a project is between phases, the author asks what to do next, too many valid threads are open, or the work needs re-entry into frame, build, drive, retro, hate, re0-work, or ship.
| name | design-md |
| description | Discovery and integration of professional design systems from multiple platforms (designmd.ai, designmd.app, getdesign.md, designmd.me). Use this when starting a project, updating UI, or requesting specific brand "looks" (Stripe, Vercel, etc.). |
This skill enables the agent to scout and apply the best design systems from the entire design-md ecosystem.
| User Intent | Platform | Method |
|---|---|---|
| Famous Brand Look (Stripe, Apple, etc.) | getdesign.md | npx getdesign add <brand> |
| CLI Automation / SaaS Kits | designmd.ai | npx designmd download <id> |
| Community Library (400+ kits) | designmd.app | Browser Search / Scrape |
| Existing Site Replication | designmd.me | URL-to-Markdown Generation |
| Agent Setup/Rules (Cursor, Claude) | designmd.app/guides | Context-specific file creation |
When a user asks for a design, scout multiple sources:
npx designmd search "<query>"llms.txt or browser tool.Showcase 3-5 results with their source, description, and preview link.
Guide the user through setup based on the chosen platform:
After applying DESIGN.md, reference designmd.app/guides to generate:
.cursorrules (for Cursor)CLAUDE.md (for Claude Code).windsurfrules (for Windsurf)designmd.ai or designmd.app link for visual preview before implementation.