UI Design Prompts
English · 简体中文
Free, production-grade UI design prompts from UI Atlas — each style is a complete design brief
(12 chapters, 25+ design tokens, a section-by-section page blueprint, component states, motion and responsive rules)
that any code-writing AI can follow, plus a real demo page built from it.
Use them in Claude Code, Codex, Cursor, Copilot, Windsurf, Trae, or paste them into Claude, ChatGPT, Gemini, v0 and Lovable.
Styles
More styles (SaaS, dashboards, commerce, editorial and more) are at ui.ddct.top.
Install
Claude Code (plugin)
/plugin marketplace add qianye60/ui-design-prompts
/plugin install ui-design-prompts@ui-design-prompts
Then ask: “Rebuild my landing page in the Soft Clay style.” Claude loads the matching skill automatically.
Or copy a single skill: cp -r skills/ui-soft-clay-fintech ~/.claude/skills/
Cursor
Copy a rule into your project: cp cursor-rules/soft-clay-fintech.mdc .cursor/rules/
Codex, Copilot, Windsurf and other AGENTS.md tools
Append a style to your project's AGENTS.md: cat agents-md/AGENTS.soft-clay-fintech.md >> AGENTS.md
Any chat AI
Open styles/<style>/prompt.md, copy everything, paste it with your request.
MCP (whole library)
Connect the UI Atlas MCP server to let your agent search and read every style itself — see https://ui.ddct.top/use.
Previews
Soft Clay
- A floating pure-CSS phone with coins
- A tilted peach highlighter stroke
- Clay-textured slider calculator
Mist Tone
- Depth by tone only, no borders or shadows
- Big figure with muted 14px unit
- Split-label filter pills with hairline
- One black action per context
License
Prompts and demo pages in this repository are licensed under CC BY 4.0.
Please credit UI Atlas with a link to https://ui.ddct.top when you share or adapt them.
Generated from UI Atlas. Brands, copy and products in the demos are fictional.
