DesignPrompts翻译站点

网站介绍

DesignPrompts 由美国加州的 Mellow Studios LLC 运营，服务条款最后更新于 2026-10-22，争议管辖地写明为 Marin County。站点全英文，前端用 Vite + TanStack Start 构建 React 应用，账号与数据层接 Convex，收款与许可密钥发放走 Polar。三篇产品博客集中在 2026 年 9 月 14—22 日发布：9 月 14 日公开 21 种风格的重做前后对比，9 月 20 日上线组件库，9 月 22 日补齐 Variations。

它针对的是 AI 写前端时最常被略过的一环：提示词里写「做得好看点」没有可执行性，模型只能反复吐出渐变卡片和圆角阴影。DesignPrompts 把视觉方向写成可复制的设计提示词，再往下延伸出组件源码与整套落地页工程，编码 Agent 拿到的是规格和文件，而不是一段形容词。

主要功能

21 种风格，同一份演示内容横向对比

首页 Prompt Explorer 列出 21 种风格，可用 Mode（Light / Dark）与 Typeface（Sans / Serif / Mono）两维筛选，↑↓ 或 j / k 移动、↵ 打开，满屏预览时这套键盘操作仍有效。右侧是统一的虚构产品「Acme Platform」落地页，Desktop / Mobile 两档宽度，按 hero、about、features、blog、process、benefits、testimonials、pricing、faq、closing、footer 逐段切换，Hide Preview 可收起画面；Get Prompt (Free) 直接复制该风格的提示词，Open Style 进入独立风格页（如 /saas 对应 Software）。

每种风格都写明字体、强调色与适用场景：Software 用 Host Grotesk 加 Instrument Sans、#0052FF 电光蓝；Luxury 是 EB Garamond 配 #b69355 金；Terminal 走等宽绿字 #33ff00；Cyberpunk #00ff88、Neo Brutalism #FACC15、Art Deco #D4AF37、Swiss Minimalist #DC2626。2026 年 9 月这 21 套风格被整体重做，博客逐个给出 1440×900 的 Before / After 对照截图，例如 Modern Dark 从居中 hero 改成黑底双栏，白色只留一处光源和四个小型实时标记。

9 套 React 组件与 shadcn registry

组件库覆盖 Monochrome、Modern Dark、Software、Luxury、Terminal、Swiss Minimalist、Financial、Claymorphism、Botanical 九种风格，每种 98 个组件 = 37 个 Primitives（Button、Select、Dialog、Table 等）+ 58 个 Blocks（Hero、Pricing、Contact 等）+ 3 个完整界面（Marketing page、Overview、Inbox）。行为层统一基于 Base UI，样式各写一套，props 与键盘交互在九种风格间保持一致：同一个 Pricing 区块换成 Luxury 是衬线加暖中性色，换成 Terminal 就是黑底绿字。

安装不需要运行时包：在 components.json 里把 registry 指向官方地址并带上 licence key，再执行 npx shadcn@latest add @designprompts/luxury/pricing，落进项目的是可随意修改的 TypeScript + Tailwind 源码，没有回传请求。Variations 共用一份内容契约，Hero 有 5 种排布，Site Header、Features、Pricing、Testimonials、Closing 各 3 种，换一行 import { HeroStage as Hero } from "@/components/hero-stage"; 就能改版式而不动 props。每个组件页都有 Copy for agent 按钮，把安装命令和一句放置说明一起交给编码 Agent。

Builder、17 个 System 与开发中的 MCP

Builder Beta 免费且无需账号，从 Blank、SaaS launch、Waitlist、Product showcase 四种起点挑 Blocks 排成落地页，再统一设定 Variations 与整体观感。Gallery 收录 17 个手工 System（Software 6、Consumer 4、Commerce and service 3、Editorial and creative 4，如 Umber、Sonde、Keepframe、Kerf & Grain），每个包里有成品页、完整 codebase 与 tokens / fonts / README、组件 kit、SEO 结构化数据、DESIGN.md 与文案规则、生成该页的 Design Prompt、5 个 agent skills、全部图片素材及权利说明，以及记录对比度实测、页面重量与 reduced-motion 行为的 PROOF.md；页面在 1440 和 390 两个宽度上验证过。

MCP connector 目前标注 In development，设想的流程是描述一个页面 → 拿到 recipe 与 layout plan → 用自然语言调整 → 合成交给编码 Agent 的提示词，Pro 购买者在功能上线时直接获得使用权。站点另有 /blog/feed.xml 的 RSS 订阅。

价格与许可边界

Pro 一次性 99 美元，无订阅、无续费，含九种风格全部组件与全部 17 个 System（含后续新增）、九个 style starter、各 System 的 agent skills 与未来的 MCP，终身更新，项目数不限且涵盖客户交付；单个 System 单独买 19 美元。免费部分包括 Explorer 与风格页、Gallery 与组件目录的浏览、Builder，以及免费风格提示词和 Builder 生成提示词的复制——条款写明可用于商业与客户项目，但不得把提示词作为合集重新发布或出售。禁止把组件目录、单个组件或 System 包单独再分发，禁止用它供给竞品 registry / 模板商店，禁止批量抓取与公开 licence key。购买和下载 System 包才需要账号（邮箱密码或 Google，需满 18 岁），Polar 作为收款方出具发票与许可密钥，退款逐案处理，支持邮箱 [email protected]。

适用人群

• 用 Claude Code、Cursor 一类编码 Agent 做落地页，却反复得到同一套默认配色的开发者
• 需要快速给客户出多版视觉方向、又要保证每版组件 props 与键盘行为一致的前端团队
• 想在自己的 React + Tailwind 项目里拿到可改源码，而不是依赖一个持续升级的 npm 运行时包的人
• 希望连 DESIGN.md、agent skills、无障碍实测数据一起交付的产品团队