{
"data": [
{
"id": "counter",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "计数器",
"en": "Counter"
},
"aliases": {
"zh": [
"计数器",
"数字计数",
"数量控件",
"counter"
],
"en": [
"Counter",
"number counter",
"count display",
"quantity control"
]
},
"description": {
"zh": "用于展示或调整数量的组件，可以是只读数字，也可以带增加、减少和重置操作。",
"en": "A component for displaying or changing a numeric value, from read-only counts to increment and decrement controls."
},
"prompt": {
"zh": [
"添加一个计数器组件，展示当前数量、上下文标签、增加和减少按钮，并处理最小值、最大值和禁用状态。"
],
"en": [
"Add a counter component with a label, current value, increment and decrement buttons, plus min, max, and disabled states."
]
},
"tip": {
"zh": "计数器要说明它是展示数据还是修改数据；如果能修改，要明确步进、上下限和空值状态。",
"en": "Clarify whether the counter only displays data or changes it. If editable, define step size, limits, and empty states."
},
"preview": {
"kind": "counter-display",
"label": {
"zh": "在线用户",
"en": "Online users"
},
"value": 128
},
"pattern": null
},
{
"id": "animated-counter",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "动画计数器",
"en": "Animated Counter"
},
"aliases": {
"zh": [
"动画计数器",
"滚动数字",
"数字递增动画",
"数字动效"
],
"en": [
"Animated Counter",
"count-up animation",
"number animation",
"rolling number"
]
},
"description": {
"zh": "让数字从起始值过渡到目标值的动效组件，常用于数据看板、首屏指标和成就反馈。",
"en": "A numeric animation that transitions from a start value to a target value, often used for dashboards, hero metrics, and achievement feedback."
},
"prompt": {
"zh": [
"做一个动画计数器，数字从 1200 平滑递增到 4820，旁边显示趋势条；需要支持 reduced-motion 时直接显示最终值。"
],
"en": [
"Create an animated counter that counts from 1200 to 4820 with supporting trend bars, and respects reduced-motion by showing the final value."
]
},
"tip": {
"zh": "动画计数器不要无限循环；它应该服务于数据变化感，并尊重用户的 reduced-motion 设置。",
"en": "Animated counters should not loop endlessly. Use them to communicate change, and respect reduced-motion preferences."
},
"preview": {
"kind": "animated-counter",
"label": {
"zh": "本月访问",
"en": "Monthly visits"
},
"start": 1200,
"target": 4820
},
"pattern": null
},
{
"id": "emoji-picker",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "表情选择器",
"en": "Emoji Picker"
},
"aliases": {
"zh": [
"表情选择器",
"Emoji 选择器",
"表情面板",
"表情输入"
],
"en": [
"Emoji Picker",
"emoji selector",
"emoji panel",
"reaction picker"
]
},
"description": {
"zh": "用于搜索、分类浏览和插入表情的选择面板，常见于聊天、评论、反馈和标签表达场景。",
"en": "A picker for searching, browsing, and inserting emoji, commonly used in chat, comments, reactions, and expressive labels."
},
"prompt": {
"zh": [
"添加一个表情选择器，支持常用表情、分类切换、搜索、键盘选择和选择后的预览反馈。"
],
"en": [
"Add an emoji picker with recent items, category tabs, search, keyboard selection, and selected-state feedback."
]
},
"tip": {
"zh": "表情选择器不是一堆 emoji 网格；需要搜索、分类、最近使用和选择反馈，输入后还要能关闭面板。",
"en": "An emoji picker is not just an emoji grid. Include search, categories, recent items, selected feedback, and close behavior."
},
"preview": {
"kind": "emoji-picker",
"groups": [
{
"label": {
"zh": "常用",
"en": "Recent"
},
"items": [
"😀",
"🔥",
"✨",
"👍",
"🎯",
"💡"
]
},
{
"label": {
"zh": "状态",
"en": "Status"
},
"items": [
"✅",
"⚠️",
"⏳",
"🚀",
"❤️",
"👀"
]
}
]
},
"pattern": null
},
{
"id": "product-tour",
"category": "interaction",
"category_label": {
"zh": "交互状态",
"en": "Interaction States"
},
"title": {
"zh": "产品引导",
"en": "Product Tour"
},
"aliases": {
"zh": [
"产品引导",
"功能引导",
"引导浮层",
"tour"
],
"en": [
"Product Tour",
"feature tour",
"guided tour",
"tour overlay"
]
},
"description": {
"zh": "通过步骤气泡、高亮区域和前后导航，引导用户认识关键功能或完成首次任务。",
"en": "A guided walkthrough using step popovers, highlighted targets, and navigation controls to introduce key features or first-time tasks."
},
"prompt": {
"zh": [
"设计一个产品引导流程，包含遮罩、高亮目标、步骤气泡、上一步、下一步、跳过和完成状态。"
],
"en": [
"Design a product tour with overlay, highlighted targets, step popovers, Back, Next, Skip, and Done states."
]
},
"tip": {
"zh": "产品引导要短，最好围绕一个真实任务，不要把所有功能都做成强制弹窗。",
"en": "Keep product tours short and task-based. Do not force users through every feature."
},
"preview": {
"kind": "product-tour",
"steps": [
{
"title": {
"zh": "先看工作区",
"en": "Start with workspace"
},
"desc": {
"zh": "高亮用户最先需要操作的区域。",
"en": "Highlight the first area the user needs."
}
},
{
"title": {
"zh": "再解释操作",
"en": "Explain the action"
},
"desc": {
"zh": "一步只讲一个动作，减少认知负担。",
"en": "Explain one action per step to reduce cognitive load."
}
},
{
"title": {
"zh": "最后给出口",
"en": "End with an exit"
},
"desc": {
"zh": "提供完成、跳过和稍后再看。",
"en": "Offer Done, Skip, and view later."
}
}
]
},
"pattern": null
},
{
"id": "rich-text-editor",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "富文本编辑器",
"en": "Rich Text Editor"
},
"aliases": {
"zh": [
"富文本编辑器",
"文本编辑器",
"所见即所得编辑器",
"WYSIWYG"
],
"en": [
"Rich Text Editor",
"text editor",
"WYSIWYG editor",
"content editor"
]
},
"description": {
"zh": "支持加粗、斜体、链接、列表、标题、撤销等格式化能力的内容输入组件。",
"en": "A content input component with formatting actions such as bold, italic, links, lists, headings, and undo."
},
"prompt": {
"zh": [
"添加一个富文本编辑器，包含工具栏、标题和正文编辑区、链接插入、列表、撤销、字符数和保存状态。"
],
"en": [
"Add a rich text editor with toolbar, title/body editing, link insertion, lists, undo, character count, and save state."
]
},
"tip": {
"zh": "富文本编辑器要明确保存方式、输出格式和粘贴清洗规则，否则很容易产生脏 HTML。",
"en": "Define saving, output format, and paste sanitization, otherwise rich text editors easily produce messy HTML."
},
"preview": {
"kind": "rich-text-editor",
"title": {
"zh": "欢迎使用富文本编辑器",
"en": "Welcome to the editor"
},
"content": {
"zh": "这里展示标题、段落、链接、列表和撤销等编辑能力。",
"en": "This area shows headings, paragraphs, links, lists, and undo actions."
},
"tools": [
"B",
"I",
"Link",
"List",
"Undo"
]
},
"pattern": null
},
{
"id": "color-picker",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "颜色选择器",
"en": "Color Picker"
},
"aliases": {
"zh": [
"颜色选择器",
"取色器",
"色板",
"颜色面板"
],
"en": [
"Color Picker",
"color selector",
"swatch picker",
"color palette"
]
},
"description": {
"zh": "用于选择、预览和输入颜色值的组件，常见于主题配置、图表设置和品牌样式编辑。",
"en": "A component for selecting, previewing, and entering color values, often used in theming, chart settings, and brand style editing."
},
"prompt": {
"zh": [
"添加颜色选择器，提供色板、当前颜色预览、HEX 输入、透明度控制和无障碍对比度提示。"
],
"en": [
"Add a color picker with swatches, current-color preview, HEX input, opacity control, and contrast feedback."
]
},
"tip": {
"zh": "颜色选择器要服务真实配置，不要只放彩虹条；至少要能复制色值、回显当前值和提示对比度。",
"en": "A color picker should support real configuration: copyable value, current selection, and contrast feedback."
},
"preview": {
"kind": "color-picker",
"colors": [
"#2563eb",
"#14b8a6",
"#f97316",
"#ef4444",
"#8b5cf6",
"#111827"
]
},
"pattern": null
},
{
"id": "custom-scrollbar",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "自定义滚动条",
"en": "Custom Scrollbar"
},
"aliases": {
"zh": [
"自定义滚动条",
"滚动条样式",
"定制滚动条",
"scrollbar"
],
"en": [
"Custom Scrollbar",
"scrollbar styling",
"styled scrollbar",
"scrollbar UI"
]
},
"description": {
"zh": "为可滚动区域设置轨道、滑块、宽度和颜色的视觉样式，同时保持可用性和可访问性。",
"en": "Visual styling for scrollable areas, including track, thumb, width, and color while preserving usability and accessibility."
},
"prompt": {
"zh": [
"为侧边栏添加自定义滚动条，轨道保持低对比，滑块在悬停时更明显，并兼容 Firefox 和 WebKit 浏览器。"
],
"en": [
"Add a custom scrollbar to the sidebar with a subtle track, clearer hover thumb, and Firefox/WebKit support."
]
},
"tip": {
"zh": "滚动条可以变美，但不能变得难以发现或难以拖动；移动端也要考虑原生滚动体验。",
"en": "Scrollbars can be styled, but should remain discoverable and easy to drag. Preserve native scrolling on mobile."
},
"preview": {
"kind": "custom-scrollbar",
"items": [
{
"title": {
"zh": "轨道",
"en": "Track"
},
"desc": {
"zh": "低对比，不抢内容注意力。",
"en": "Low contrast, does not compete with content."
}
},
{
"title": {
"zh": "滑块",
"en": "Thumb"
},
"desc": {
"zh": "悬停和拖动时更明显。",
"en": "Clearer on hover and drag."
}
},
{
"title": {
"zh": "边距",
"en": "Inset"
},
"desc": {
"zh": "给内容右侧留出呼吸空间。",
"en": "Leaves breathing room beside content."
}
},
{
"title": {
"zh": "兼容",
"en": "Support"
},
"desc": {
"zh": "同时考虑 Firefox 和 WebKit。",
"en": "Covers Firefox and WebKit."
}
}
]
},
"pattern": null
},
{
"id": "scrollbar-thumb",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "滚动条滑块",
"en": "Scrollbar Thumb"
},
"aliases": {
"zh": [
"滚动条滑块",
"滚动滑块",
"滚动条把手",
"thumb"
],
"en": [
"Scrollbar Thumb",
"scroll thumb",
"scrollbar handle",
"thumb"
]
},
"description": {
"zh": "滚动条中可拖动的滑块部分，用来表达当前位置、可滚动长度和拖拽状态。",
"en": "The draggable part of a scrollbar that communicates current position, scrollable length, and drag state."
},
"prompt": {
"zh": [
"优化滚动条滑块，默认状态低调，悬停时扩大触达面积，拖动时提高对比度，并保证最小高度。"
],
"en": [
"Improve the scrollbar thumb with subtle default state, larger hover target, stronger drag contrast, and a minimum height."
]
},
"tip": {
"zh": "滑块不是装饰线，它承担当前位置反馈；太细、太浅或没有 hover 状态都会降低可用性。",
"en": "The thumb is positional feedback, not decoration. Too thin, too faint, or no hover state hurts usability."
},
"preview": {
"kind": "scrollbar-thumb",
"title": {
"zh": "滑块状态",
"en": "Thumb states"
},
"content": {
"zh": "点击不同位置观察滑块移动，真实组件还需要 hover、drag 和 disabled 状态。",
"en": "Click positions to move the thumb. Real components also need hover, drag, and disabled states."
}
},
"pattern": null
},
{
"id": "code-editor",
"category": "dev",
"category_label": {
"zh": "开发概念",
"en": "Development"
},
"title": {
"zh": "代码编辑器",
"en": "Code Editor"
},
"aliases": {
"zh": [
"代码编辑器",
"代码输入框",
"源码编辑器",
"CodeMirror"
],
"en": [
"Code Editor",
"source editor",
"code input",
"Monaco editor"
]
},
"description": {
"zh": "用于编写或预览代码的编辑区域，常包含行号、语法高亮、文件标签、错误提示和快捷键。",
"en": "An editing surface for writing or previewing code, often with line numbers, syntax highlighting, file tabs, errors, and shortcuts."
},
"prompt": {
"zh": [
"添加一个代码编辑器预览，支持文件标签、行号、语法高亮、当前行高亮、错误标记和复制代码按钮。"
],
"en": [
"Add a code editor preview with file tabs, line numbers, syntax highlighting, current-line highlight, error marks, and copy code."
]
},
"tip": {
"zh": "代码编辑器要明确是只读展示还是可编辑；可编辑时要选 Monaco、CodeMirror 等成熟方案，不要手写编辑内核。",
"en": "Clarify whether the editor is read-only or editable. For editing, use a mature engine such as Monaco or CodeMirror."
},
"preview": {
"kind": "code-editor",
"files": [
{
"name": "Button.tsx",
"lines": [
"export function Button() {",
" return ",
"}"
]
},
{
"name": "theme.css",
"lines": [
".ui-btn {",
" border-radius: 8px;",
" background: var(--brand);",
"}"
]
}
]
},
"pattern": null
},
{
"id": "query-builder",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "查询构建器",
"en": "Query Builder"
},
"aliases": {
"zh": [
"查询构建器",
"条件构建器",
"筛选规则编辑器",
"高级筛选"
],
"en": [
"Query Builder",
"condition builder",
"filter rule builder",
"advanced filter"
]
},
"description": {
"zh": "通过字段、操作符和值组合复杂查询条件的组件，常用于高级筛选、报表和自动化规则。",
"en": "A component for composing complex query conditions from fields, operators, and values, often used in advanced filters, reports, and automation rules."
},
"prompt": {
"zh": [
"设计一个查询构建器，支持 AND/OR 分组、字段选择、操作符、值输入、规则启停、删除规则和空规则提示。"
],
"en": [
"Design a query builder with AND/OR groups, field selection, operators, values, rule toggles, delete actions, and empty-rule hints."
]
},
"tip": {
"zh": "查询构建器最重要的是条件语义清楚；字段、操作符和值要形成一句能读懂的规则。",
"en": "A query builder must make condition semantics clear. Field, operator, and value should read like an understandable rule."
},
"preview": {
"kind": "query-builder",
"rows": [
{
"field": {
"zh": "用户角色",
"en": "User role"
},
"match": "=",
"value": {
"zh": "管理员",
"en": "Admin"
}
},
{
"field": {
"zh": "最近登录",
"en": "Last login"
},
"match": "<",
"value": {
"zh": "30 天前",
"en": "30 days ago"
}
},
{
"field": {
"zh": "状态",
"en": "Status"
},
"match": "!=",
"value": {
"zh": "已禁用",
"en": "Disabled"
}
}
]
},
"pattern": null
},
{
"id": "header",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "页眉",
"en": "Header"
},
"aliases": {
"zh": [
"页眉",
"顶栏",
"标头"
],
"en": [
"Header",
"header",
"top bar",
"masthead"
]
},
"description": {
"zh": "页面顶部的区域，通常承载品牌标识、主导航和关键行动按钮，是用户判断站点结构的第一入口。",
"en": "The horizontal bar at the very top of a page. Holds the logo, navigation, and CTA button — essentially the face of the site."
},
"prompt": {
"zh": [
"设计一个页眉：左侧放品牌标识，中间放 3-4 个主导航链接，右侧放登录和注册按钮。",
"让页眉在滚动时固定在顶部，并在滚动后稍微加深背景和阴影。"
],
"en": [
"Put the logo on the left side of the header, with three nav links and a Contact button on the right.",
"Make the header stick to the top when scrolling (sticky header)."
]
},
"tip": {
"zh": "说清楚页眉是否固定、是否透明、滚动后如何变化，AI 才不容易做成普通导航条。",
"en": "Specifying a variant like \"sticky header\", \"transparent header\", or \"color-changing header on scroll\" helps the AI nail the implementation."
},
"preview": {
"kind": "header-layout",
"logo": {
"zh": "Mianhua",
"en": "Mianhua"
},
"navItems": [
{
"label": {
"zh": "首页",
"en": "Home"
}
},
{
"label": {
"zh": "博客",
"en": "Blog"
}
},
{
"label": {
"zh": "项目",
"en": "Projects"
}
},
{
"label": {
"zh": "关于",
"en": "About"
}
}
],
"actions": [
{
"label": {
"zh": "登录",
"en": "Sign In"
},
"type": "ghost"
},
{
"label": {
"zh": "注册",
"en": "Sign Up"
},
"type": "primary"
}
]
},
"pattern": null
},
{
"id": "footer",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "页脚",
"en": "Footer"
},
"aliases": {
"zh": [
"页脚",
"底栏"
],
"en": [
"Footer",
"footer",
"bottom bar"
]
},
"description": {
"zh": "页面底部的信息区，通常包含版权、站点地图、政策链接、社交入口和公司信息。",
"en": "The area at the bottom of every page. Typically holds the copyright, sitemap links, social icons, and company info."
},
"prompt": {
"zh": [
"添加一个页脚：上方是三列链接分组，下方是版权、隐私政策和服务条款。"
],
"en": [
"Add a footer with a three-column link list and a copyright line at the very bottom."
]
},
"tip": {
"zh": "页脚不只是收尾，它还承担信任和补充导航。隐私政策、条款和联系入口要明确。",
"en": "The footer also signals trust. Privacy policy and terms links are must-haves."
},
"preview": {
"kind": "footer-layout",
"columns": [
{
"title": {
"zh": "产品",
"en": "Product"
},
"links": [
{
"label": {
"zh": "功能",
"en": "Features"
}
},
{
"label": {
"zh": "定价",
"en": "Pricing"
}
},
{
"label": {
"zh": "案例",
"en": "Use Cases"
}
}
]
},
{
"title": {
"zh": "资源",
"en": "Resources"
},
"links": [
{
"label": {
"zh": "文档",
"en": "Documentation"
}
},
{
"label": {
"zh": "博客",
"en": "Blog"
}
},
{
"label": {
"zh": "API",
"en": "API"
}
}
]
},
{
"title": {
"zh": "公司",
"en": "Company"
},
"links": [
{
"label": {
"zh": "关于我们",
"en": "About"
}
},
{
"label": {
"zh": "联系",
"en": "Contact"
}
},
{
"label": {
"zh": "隐私",
"en": "Privacy"
}
}
]
}
],
"copyright": {
"zh": "© 2026 Mianhua. 保留所有权利。",
"en": "© 2026 Mianhua. All rights reserved."
}
},
"pattern": null
},
{
"id": "sidebar",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "侧边栏",
"en": "Sidebar"
},
"aliases": {
"zh": [
"侧边栏",
"侧栏",
"左栏",
"右栏"
],
"en": [
"Sidebar",
"sidebar",
"side column",
"left column",
"right column"
]
},
"description": {
"zh": "主内容旁边的垂直辅助列，常用于目录导航、筛选条件、相关内容或次要操作。",
"en": "A vertical column next to the main content. Used for category lists, related posts, ads, or filters."
},
"prompt": {
"zh": [
"在主内容左侧添加一个侧边栏，用于展示分类列表和当前选中状态。",
"移动端将侧边栏收起为筛选按钮，点击后用抽屉面板展示。"
],
"en": [
"Add a sidebar on the left showing a list of categories.",
"Hide the sidebar on mobile."
]
},
"tip": {
"zh": "侧边栏一定要说明移动端策略：隐藏、下移，还是变成抽屉。否则很容易挤压主内容。",
"en": "For responsive layouts, it's standard to say \"hide on mobile\" or \"move below the main content on mobile\"."
},
"preview": {
"kind": "sidebar-layout",
"title": {
"zh": "文档导航",
"en": "Documentation"
},
"sections": [
{
"title": {
"zh": "快速开始",
"en": "Getting Started"
},
"items": [
{
"label": {
"zh": "安装",
"en": "Installation"
},
"active": true
},
{
"label": {
"zh": "配置",
"en": "Configuration"
}
},
{
"label": {
"zh": "使用",
"en": "Usage"
}
}
]
},
{
"title": {
"zh": "组件",
"en": "Components"
},
"items": [
{
"label": {
"zh": "按钮",
"en": "Buttons"
}
},
{
"label": {
"zh": "表单",
"en": "Forms"
}
},
{
"label": {
"zh": "布局",
"en": "Layout"
}
}
]
}
]
},
"pattern": null
},
{
"id": "section",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "区块",
"en": "Section"
},
"aliases": {
"zh": [
"区块",
"版块",
"区域"
],
"en": [
"Section",
"section",
"block",
"area"
]
},
"description": {
"zh": "页面中的主题内容单元，用来把首屏、功能、案例、定价等内容拆成清晰的阅读节奏。",
"en": "A large block that divides a page into meaningful units — e.g., hero section, features section, pricing section."
},
"prompt": {
"zh": [
"把页面拆成清晰区块：首屏、功能说明、案例证明、定价和最终行动区，每个区块都有标题、内容重点和上下留白。"
],
"en": [
"Structure the page into clear sections: hero, feature explanation, proof, pricing, and final CTA, each with a heading, content focus, and vertical spacing."
]
},
"tip": {
"zh": "说“区块”时最好补充它的内容目标、内部布局和上下间距，否则 AI 只会生成普通卡片堆。",
"en": "\"Section\" is the safest word; \"area\" and \"part\" also work."
},
"preview": {
"kind": "section-layout",
"title": {
"zh": "功能说明区块",
"en": "Feature section"
},
"subtitle": {
"zh": "页面中的一个主题段落，负责承接首屏并解释一组内容。",
"en": "A themed page segment that follows the hero and explains one content group."
},
"sections": [
{
"label": {
"zh": "首屏",
"en": "Hero"
},
"tone": "muted"
},
{
"label": {
"zh": "功能说明",
"en": "Features"
},
"tone": "active"
},
{
"label": {
"zh": "案例证明",
"en": "Proof"
},
"tone": "muted"
},
{
"label": {
"zh": "定价",
"en": "Pricing"
},
"tone": "muted"
},
{
"label": {
"zh": "最终行动",
"en": "Final CTA"
},
"tone": "muted"
}
],
"rhythm": [
{
"label": {
"zh": "上方留白",
"en": "Top spacing"
},
"value": "80px"
},
{
"label": {
"zh": "内容目标",
"en": "Content goal"
},
"value": {
"zh": "解释一组主题",
"en": "Explain one topic"
}
},
{
"label": {
"zh": "下方留白",
"en": "Bottom spacing"
},
"value": "96px"
}
]
},
"pattern": null
},
{
"id": "hero",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "Hero 区块",
"en": "Hero Section"
},
"aliases": {
"zh": [
"Hero 区块",
"首屏主视觉",
"首屏区",
"主视觉区"
],
"en": [
"Hero Section",
"hero",
"hero section",
"above the fold",
"main visual"
]
},
"description": {
"zh": "页面打开后最先看到的核心区域，负责用标题、说明、主行动按钮和视觉元素快速交代页面价值。",
"en": "The first big area visible when the page loads. Holds the headline, subtext, CTA button, and background visual."
},
"prompt": {
"zh": [
"设计一个首屏 Hero 区块，包含清晰标题、副标题、主按钮、辅助按钮和能体现产品气质的背景视觉。"
],
"en": [
"In the hero section, add a big headline and a CTA button, with a gradient background."
]
},
"tip": {
"zh": "Hero 不只是“大图加标题”，重点是让用户在几秒内明白你是谁、提供什么、下一步点哪里。",
"en": "\"Above the fold\" and \"main visual\" mean the same thing. It's often said 80% of a landing page's success rides on the hero."
},
"preview": {
"kind": "hero-section",
"badge": {
"zh": "全新发布",
"en": "Now Available"
},
"title": {
"zh": "构建下一代 Web 应用",
"en": "Build Next-Gen Web Apps"
},
"subtitle": {
"zh": "使用现代工具和最佳实践，快速打造高质量的用户体验",
"en": "Create quality experiences with modern tools and best practices"
},
"actions": [
{
"label": {
"zh": "开始使用",
"en": "Get Started"
},
"type": "primary"
},
{
"label": {
"zh": "查看演示",
"en": "View Demo"
},
"type": "secondary"
}
],
"image": {
"type": "gradient",
"colors": [
"#3b82f6",
"#8b5cf6",
"#ec4899"
]
}
},
"pattern": null
},
{
"id": "container",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "容器",
"en": "Container"
},
"aliases": {
"zh": [
"容器",
"内容容器",
"版心",
"最大宽度"
],
"en": [
"Container",
"container",
"wrapper",
"max-width"
]
},
"description": {
"zh": "限制内容最大宽度并保持左右留白的布局结构，让大屏不松散、小屏不拥挤。",
"en": "An invisible box that caps the content width and keeps horizontal padding — so text doesn't stretch too wide on large screens."
},
"prompt": {
"zh": [
"给页面加一个居中的内容容器：大屏时内容不要铺满全屏，小屏时左右保留安全边距，并让标题、正文和卡片都沿同一条版心对齐。"
],
"en": [
"Add a centered content container: keep content from stretching full-width on large screens, preserve side padding on small screens, and align headings, text, and cards to the same content rail."
]
},
"tip": {
"zh": "容器决定页面的阅读宽度和对齐秩序，别让正文在宽屏上无限拉长。",
"en": "Saying \"max-width: 1200px, centered\" is the clearest. 1000–1400px is the common range."
},
"preview": {
"kind": "container-layout",
"maxWidth": "1200px",
"content": {
"zh": "容器不是可见卡片，而是一条居中的内容轨道：把正文、图片和按钮收在中间，两侧留出舒服的空白。",
"en": "A container is not a visible card; it is a centered content rail that keeps text, media, and actions readable with comfortable side space."
}
},
"pattern": null
},
{
"id": "cta",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "CTA（行动号召）",
"en": "CTA (Call To Action)"
},
"aliases": {
"zh": [
"CTA",
"行动号召",
"主行动按钮",
"转化入口"
],
"en": [
"CTA (Call To Action)",
"CTA",
"call to action",
"CTA button",
"CTA section"
]
},
"description": {
"zh": "引导用户完成关键动作的按钮或区块，例如注册、购买、预约、下载或继续了解。",
"en": "Any element that prompts the user to act — buttons or sections that say \"Sign up now\", \"Start free\", etc."
},
"prompt": {
"zh": [
"设计一个清晰的 CTA 区块，突出主行动按钮，并用一句短文案说明点击后能获得什么。"
],
"en": [
"Put a prominent \"Start for free\" CTA button in the hero.",
"Add a CTA section at the bottom of the page."
]
},
"tip": {
"zh": "CTA 的文案要写动作结果，不要只写“提交”或“了解更多”这种模糊按钮。",
"en": "\"CTA\" can refer to a single button or a whole section. A contrasting background and generous whitespace is the classic formula."
},
"preview": {
"kind": "cta-section",
"title": {
"zh": "准备好开始了吗？",
"en": "Ready to Get Started?"
},
"description": {
"zh": "立即注册，免费试用 14 天，无需信用卡",
"en": "Sign up now for a 14-day free trial. No credit card required."
},
"primaryAction": {
"label": {
"zh": "免费试用",
"en": "Start Free Trial"
}
},
"secondaryAction": {
"label": {
"zh": "联系销售",
"en": "Contact Sales"
}
},
"features": [
{
"text": {
"zh": "无需信用卡",
"en": "No credit card"
}
},
{
"text": {
"zh": "14 天免费",
"en": "14 days free"
}
},
{
"text": {
"zh": "随时取消",
"en": "Cancel anytime"
}
}
]
},
"pattern": null
},
{
"id": "navbar",
"category": "nav",
"category_label": {
"zh": "导航",
"en": "Navigation"
},
"title": {
"zh": "导航栏",
"en": "Navbar"
},
"aliases": {
"zh": [
"导航栏",
"全局导航",
"顶部导航",
"菜单栏"
],
"en": [
"Navbar",
"navbar",
"nav",
"global nav",
"menu bar"
]
},
"description": {
"zh": "帮助用户理解站点结构并跳转主要页面的导航区域，通常包含品牌、主菜单和关键操作入口。",
"en": "The horizontal menu at the top of a page, with links to the site's main pages."
},
"prompt": {
"zh": [
"设计一个响应式导航栏，包含品牌标识、主导航链接、当前页面状态和移动端菜单。"
],
"en": [
"Put Home, Services, Pricing, and Contact links in the navbar, arranged horizontally."
]
},
"tip": {
"zh": "导航栏要优先服务路径判断，链接数量越多，越需要分组、层级和当前状态。",
"en": "\"Global nav\" refers to the menu shown consistently across every page."
},
"preview": {
"kind": "navbar-layout",
"logo": {
"zh": "Mianhua",
"en": "Mianhua"
},
"links": [
{
"label": {
"zh": "产品",
"en": "Product"
},
"active": false
},
{
"label": {
"zh": "解决方案",
"en": "Solutions"
},
"active": false
},
{
"label": {
"zh": "资源",
"en": "Resources"
},
"active": true
},
{
"label": {
"zh": "定价",
"en": "Pricing"
},
"active": false
}
],
"actions": [
{
"label": {
"zh": "登录",
"en": "Sign In"
}
},
{
"label": {
"zh": "开始使用",
"en": "Get Started"
},
"primary": true
}
],
"sticky": true
},
"pattern": null
},
{
"id": "hamburger",
"category": "nav",
"category_label": {
"zh": "导航",
"en": "Navigation"
},
"title": {
"zh": "汉堡菜单",
"en": "Hamburger Menu"
},
"aliases": {
"zh": [
"汉堡菜单",
"移动端菜单",
"折叠菜单",
"菜单按钮"
],
"en": [
"Hamburger Menu",
"hamburger",
"three-line menu",
"mobile menu"
]
},
"description": {
"zh": "移动端常见的三横线菜单按钮，点击后展开隐藏导航或侧边菜单。",
"en": "A three-line icon (☰) that opens a menu when tapped. Mainly used on mobile."
},
"prompt": {
"zh": [
"为移动端导航添加汉堡菜单，点击后展开菜单面板，并提供关闭按钮和当前页面高亮。"
],
"en": [
"On mobile, switch to a hamburger menu. Tapping it should slide in a menu from the left."
]
},
"tip": {
"zh": "汉堡菜单必须有明确的展开、关闭和焦点处理，不能只是放一个三横线图标。",
"en": "Often paired with a \"drawer menu\" that slides in from the side."
},
"preview": {
"kind": "hamburger-menu",
"state": "closed",
"menuItems": [
{
"label": {
"zh": "首页",
"en": "Home"
},
"icon": "home"
},
{
"label": {
"zh": "产品",
"en": "Products"
},
"icon": "box"
},
{
"label": {
"zh": "服务",
"en": "Services"
},
"icon": "briefcase"
},
{
"label": {
"zh": "关于",
"en": "About"
},
"icon": "info"
},
{
"label": {
"zh": "联系",
"en": "Contact"
},
"icon": "mail"
}
],
"expandedState": {
"title": {
"zh": "移动菜单",
"en": "Mobile Menu"
},
"note": {
"zh": "点击图标展开菜单",
"en": "Tap icon to expand menu"
}
}
},
"pattern": null
},
{
"id": "breadcrumb",
"category": "nav",
"category_label": {
"zh": "导航",
"en": "Navigation"
},
"title": {
"zh": "面包屑",
"en": "Breadcrumb"
},
"aliases": {
"zh": [
"面包屑",
"路径导航",
"层级路径"
],
"en": [
"Breadcrumb",
"breadcrumb",
"breadcrumbs",
"trail"
]
},
"description": {
"zh": "展示当前页面在站点层级中的位置，帮助用户返回上级分类或理解内容归属。",
"en": "Navigation showing the hierarchy of the current page — e.g., Home > Category > Article."
},
"prompt": {
"zh": [
"为内容详情页添加面包屑导航，展示首页、上级分类和当前页面，并让上级节点可点击。"
],
"en": [
"Add a breadcrumb trail at the top of the page."
]
},
"tip": {
"zh": "面包屑适合层级较深的网站；如果页面只有一两层，可能不需要。",
"en": "Good for SEO — you can ask the AI to include schema.org structured data too."
},
"preview": {
"kind": "breadcrumb-navigation",
"items": [
{
"label": {
"zh": "首页",
"en": "Home"
},
"href": "/"
},
{
"label": {
"zh": "产品",
"en": "Products"
},
"href": "/products"
},
{
"label": {
"zh": "分类",
"en": "Categories"
},
"href": "/products/categories"
},
{
"label": {
"zh": "电子产品",
"en": "Electronics"
},
"current": true
}
],
"separator": "/"
},
"pattern": null
},
{
"id": "pagination",
"category": "nav",
"category_label": {
"zh": "导航",
"en": "Navigation"
},
"title": {
"zh": "分页",
"en": "Pagination"
},
"aliases": {
"zh": [
"分页",
"分页器",
"页码导航"
],
"en": [
"Pagination",
"pagination",
"pager",
"page navigation"
]
},
"description": {
"zh": "把大量列表内容拆成多个页面，并提供上一页、下一页、页码和当前页状态。",
"en": "Splits content across multiple pages with \"1 2 3 ... Next\"-style navigation. Common on list pages."
},
"prompt": {
"zh": [
"为列表页设计分页器，包含上一页、下一页、当前页、高亮页码、禁用态和移动端简化样式。"
],
"en": [
"Add pagination below the blog list, 10 posts per page."
]
},
"tip": {
"zh": "分页适合用户需要稳定翻页和定位页码的列表；连续浏览更适合无限滚动。",
"en": "If you mention infinite scroll as an alternative, the AI can help you pick the right pattern."
},
"preview": {
"kind": "pagination-control",
"currentPage": 3,
"totalPages": 10,
"pageSize": 20,
"totalItems": 196,
"showPageNumbers": true,
"prevLabel": {
"zh": "上一页",
"en": "Previous"
},
"nextLabel": {
"zh": "下一页",
"en": "Next"
},
"pageInfo": {
"zh": "第 3 页，共 10 页",
"en": "Page 3 of 10"
}
},
"pattern": null
},
{
"id": "tab",
"category": "nav",
"category_label": {
"zh": "导航",
"en": "Navigation"
},
"title": {
"zh": "选项卡",
"en": "Tab"
},
"aliases": {
"zh": [
"选项卡",
"标签页",
"页签",
"分栏切换"
],
"en": [
"Tab",
"tab",
"tabs",
"tab menu"
]
},
"description": {
"zh": "在同一块区域内切换几组并列内容，让用户不用离开当前页面就能比较或切换视图。",
"en": "A UI that swaps content in the same area — e.g., toggling monthly vs yearly pricing."
},
"prompt": {
"zh": [
"设计一组选项卡，用于切换不同内容面板，并明确当前选中态、悬停态和键盘切换方式。"
],
"en": [
"Add tabs to the pricing section to switch between monthly and yearly."
]
},
"tip": {
"zh": "选项卡适合少量并列内容；选项太多时更适合下拉、搜索或侧边导航。",
"en": "The content inside a tab is called a \"tab panel\". An underline or accent color on the active tab is the convention."
},
"preview": {
"kind": "tab-navigation",
"tabs": [
{
"id": "overview",
"label": {
"zh": "概览",
"en": "Overview"
},
"active": true
},
{
"id": "details",
"label": {
"zh": "详细信息",
"en": "Details"
},
"active": false
},
{
"id": "settings",
"label": {
"zh": "设置",
"en": "Settings"
},
"active": false
}
],
"content": {
"zh": "这里显示当前标签页的内容",
"en": "Content for the active tab"
}
},
"pattern": null
},
{
"id": "anchor",
"category": "nav",
"category_label": {
"zh": "导航",
"en": "Navigation"
},
"title": {
"zh": "锚点链接",
"en": "Anchor Link"
},
"aliases": {
"zh": [
"锚点链接",
"页内链接",
"跳转链接",
"平滑滚动"
],
"en": [
"Anchor Link",
"anchor link",
"in-page link",
"jump link",
"smooth scroll"
]
},
"description": {
"zh": "点击后跳到同一页面内某个区块的链接，常用于长页面目录、落地页导航和文档页。",
"en": "A link that jumps to another spot on the same page — standard for landing-page navs."
},
"prompt": {
"zh": [
"为长页面添加页内锚点导航，点击后平滑滚动到对应区块，并高亮当前阅读位置。"
],
"en": [
"When a nav link is clicked, smooth-scroll to the matching section."
]
},
"tip": {
"zh": "锚点链接要配合清晰的区块标题，否则用户跳过去也不知道自己到了哪里。",
"en": "Add \"smooth scroll\" for a gliding motion; without it, the jump is instant."
},
"preview": {
"kind": "anchor-navigation",
"title": {
"zh": "页内导航",
"en": "On This Page"
},
"items": [
{
"label": {
"zh": "概述",
"en": "Overview"
},
"href": "#overview",
"active": true
},
{
"label": {
"zh": "安装",
"en": "Installation"
},
"href": "#installation"
},
{
"label": {
"zh": "配置",
"en": "Configuration"
},
"href": "#configuration"
},
{
"label": {
"zh": "使用示例",
"en": "Usage Examples"
},
"href": "#examples"
},
{
"label": {
"zh": "API 参考",
"en": "API Reference"
},
"href": "#api"
}
],
"position": "right"
},
"pattern": null
},
{
"id": "button",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "按钮",
"en": "Button"
},
"aliases": {
"zh": [
"按钮",
"操作按钮",
"btn"
],
"en": [
"Button",
"button",
"btn"
]
},
"description": {
"zh": "触发具体操作的控件，例如保存、发布、删除、打开弹窗或提交表单。",
"en": "A UI element that triggers an action on click or tap. Unlike a link, it's built around taking action."
},
"prompt": {
"zh": [
"设计一套按钮样式，包含主按钮、次按钮、危险按钮、禁用态、加载态和键盘焦点态。"
],
"en": [
"Make the primary button a solid purple fill, and the secondary an outline-only style."
]
},
"tip": {
"zh": "按钮文案要说清会发生什么；跳转页面更像链接，执行动作才更像按钮。",
"en": "Organize buttons into three tiers: primary (solid), secondary (outline), and ghost (no background)."
},
"preview": {
"kind": "button-showcase",
"variants": [
{
"type": "primary",
"label": {
"zh": "立即开始",
"en": "Get Started"
},
"style": "solid"
},
{
"type": "secondary",
"label": {
"zh": "了解更多",
"en": "Learn More"
},
"style": "outline"
},
{
"type": "ghost",
"label": {
"zh": "取消",
"en": "Cancel"
},
"style": "ghost"
}
]
},
"pattern": null
},
{
"id": "card",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "卡片",
"en": "Card"
},
"aliases": {
"zh": [
"卡片",
"内容卡片",
"信息卡",
"tile"
],
"en": [
"Card",
"card",
"tile"
]
},
"description": {
"zh": "把一组相关信息收进独立容器，常用于文章、产品、案例、成员和功能入口。",
"en": "A box-shaped UI bundling an image, title, and text. Used for article lists, product grids, team pages, etc."
},
"prompt": {
"zh": [
"设计一张内容卡片，包含封面、标题、摘要、标签、状态和主操作，并保证不同内容长度下不溢出。"
],
"en": [
"Lay out the blog posts as a three-column card grid. Each card should show a thumbnail, title, and date."
]
},
"tip": {
"zh": "卡片适合扫描和比较，但卡片里不要塞太多层级，否则会变成小型详情页。",
"en": "Ask for a deeper shadow on hover to create a subtle \"lift\" effect — it feels premium."
},
"preview": {
"kind": "card-layout",
"title": {
"zh": "项目卡片",
"en": "Project Card"
},
"image": {
"type": "gradient",
"colors": [
"#3b82f6",
"#8b5cf6"
]
},
"content": {
"zh": "这是一个现代化的卡片组件，支持图片、标题、描述和操作按钮。",
"en": "A modern card component with image, title, description and action buttons."
},
"meta": [
{
"icon": "calendar",
"text": {
"zh": "2 天前",
"en": "2 days ago"
}
},
{
"icon": "user",
"text": {
"zh": "张三",
"en": "John Doe"
}
}
],
"action": {
"label": {
"zh": "查看详情",
"en": "View Details"
}
}
},
"pattern": null
},
{
"id": "modal",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "模态框",
"en": "Modal / Dialog"
},
"aliases": {
"zh": [
"模态框",
"对话框",
"弹窗",
"遮罩弹层"
],
"en": [
"Modal / Dialog",
"modal",
"dialog",
"popup",
"overlay"
]
},
"description": {
"zh": "覆盖在当前页面之上的对话层，用于确认、编辑、查看详情或打断式关键操作。",
"en": "A window layered over the page. The background dims and focus stays inside the modal. Used for confirmations, forms, and detail views."
},
"prompt": {
"zh": [
"设计一个模态框，包含标题、正文、主次操作、关闭按钮、背景遮罩、焦点锁定和 Esc 关闭。"
],
"en": [
"When a card is clicked, open a modal with the details. Blur and darken the background."
]
},
"tip": {
"zh": "模态框会打断用户流程，只适合必须立即处理的内容；普通详情可以考虑抽屉或独立页面。",
"en": "Also specify: close on outside click, close button (×), and Esc key to dismiss."
},
"preview": {
"kind": "modal-dialog",
"title": {
"zh": "确认删除",
"en": "Confirm Delete"
},
"content": {
"zh": "此操作无法撤销，确定要删除这个项目吗？",
"en": "This action cannot be undone. Delete this item?"
},
"actions": [
{
"type": "cancel",
"label": {
"zh": "取消",
"en": "Cancel"
}
},
{
"type": "confirm",
"label": {
"zh": "确认删除",
"en": "Delete"
},
"variant": "danger"
}
]
},
"pattern": null
},
{
"id": "dropdown",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "下拉菜单",
"en": "Dropdown"
},
"aliases": {
"zh": [
"下拉菜单",
"下拉列表",
"菜单",
"选项菜单"
],
"en": [
"Dropdown",
"dropdown",
"pulldown",
"menu"
]
},
"description": {
"zh": "点击触发后展开一组选项或操作，适合收纳低频动作、排序方式或导航子菜单。",
"en": "A menu or list that expands downward on click or hover. Used for nav submenus and option lists."
},
"prompt": {
"zh": [
"设计一个下拉菜单，包含触发按钮、选项列表、选中态、悬停态、键盘导航和点击外部关闭。"
],
"en": [
"Show a dropdown menu when hovering over \"Services\" in the nav."
]
},
"tip": {
"zh": "下拉菜单不要隐藏高频主操作；如果用户经常需要比较选项，直接展示会更好。",
"en": "\"Pulldown\" means the same thing but is more commonly used for form selects."
},
"preview": {
"kind": "dropdown-menu",
"trigger": {
"zh": "选择语言",
"en": "Select Language"
},
"options": [
{
"value": "zh",
"label": {
"zh": "简体中文",
"en": "Chinese"
},
"icon": "🇨🇳"
},
{
"value": "en",
"label": {
"zh": "英语",
"en": "English"
},
"icon": "🇺🇸"
},
{
"value": "ja",
"label": {
"zh": "日语",
"en": "Japanese"
},
"icon": "🇯🇵"
}
]
},
"pattern": null
},
{
"id": "accordion",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "手风琴",
"en": "Accordion"
},
"aliases": {
"zh": [
"手风琴",
"折叠面板",
"展开收起",
"可展开内容"
],
"en": [
"Accordion",
"accordion",
"collapse",
"expandable"
]
},
"description": {
"zh": "通过展开和收起标题下的内容，减少页面初始信息量，常用于 FAQ、设置项和说明列表。",
"en": "A UI where clicking a header toggles the content open or closed. Perfect for FAQs and progressive details."
},
"prompt": {
"zh": [
"设计一个手风琴列表，支持展开当前项、收起内容、显示展开图标，并处理长文本和移动端间距。"
],
"en": [
"Build the FAQ as an accordion. Toggle on click, and swap the + for a − on the open item."
]
},
"tip": {
"zh": "手风琴适合用户按需阅读；如果每条内容都很重要，不要默认折叠。",
"en": "You can also specify behaviors like \"only one open at a time\" vs \"multiple open allowed\"."
},
"preview": {
"kind": "accordion-component",
"items": [
{
"title": {
"zh": "什么是 Mianhua？",
"en": "What is Mianhua?"
},
"content": {
"zh": "一个现代化的内容管理系统",
"en": "A modern content management system"
},
"expanded": true
},
{
"title": {
"zh": "如何开始使用？",
"en": "How to get started?"
},
"content": {
"zh": "访问文档页面查看快速入门指南",
"en": "Visit docs for quick start guide"
},
"expanded": false
},
{
"title": {
"zh": "支持哪些功能？",
"en": "What features are supported?"
},
"content": {
"zh": "博客、项目展示、工具集等",
"en": "Blogs, projects, toolbox and more"
},
"expanded": false
}
]
},
"pattern": null
},
{
"id": "tooltip",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "工具提示",
"en": "Tooltip"
},
"aliases": {
"zh": [
"工具提示",
"悬浮提示",
"提示气泡",
"hover 提示"
],
"en": [
"Tooltip",
"hover hint",
"help tip",
"hint bubble"
]
},
"description": {
"zh": "在悬停或聚焦时出现的短提示，用来解释图标、按钮或字段含义。",
"en": "A small text bubble shown on hover. Used to give extra context for buttons or icons."
},
"prompt": {
"zh": [
"为图标按钮添加工具提示，支持鼠标悬停和键盘聚焦，并保证提示内容短、位置不遮挡操作。"
],
"en": [
"When the icon is hovered, show a small tooltip above it with the description."
]
},
"tip": {
"zh": "Tooltip 只解释一个小信息；如果里面有按钮、表单或复杂内容，应使用 Popover。",
"en": "Tooltip explains a small hint; use Popover for buttons, forms, or rich content."
},
"preview": {
"kind": "tooltip-demo",
"target": {
"zh": "悬停查看提示",
"en": "Hover me"
},
"content": {
"zh": "这是一个工具提示，用于显示额外信息",
"en": "This is a tooltip for extra info"
},
"positions": [
"top",
"right",
"bottom",
"left"
]
},
"pattern": null
},
{
"id": "toast",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "轻提示（Toast）",
"en": "Toast / Snackbar"
},
"aliases": {
"zh": [
"轻提示",
"Toast",
"Snackbar",
"操作反馈"
],
"en": [
"Toast",
"Snackbar",
"transient feedback",
"action feedback"
]
},
"description": {
"zh": "短暂出现的非阻塞反馈，用来告诉用户操作已成功、失败或正在处理中。",
"en": "A brief notification that appears in a corner — e.g., \"Saved\" or \"Sent\" — to confirm an action."
},
"prompt": {
"zh": [
"设计一个 Toast 反馈组件，包含成功、错误、加载三种状态，可自动消失，也允许用户手动关闭。"
],
"en": [
"After form submission, show a \"Sent successfully\" toast in the bottom-right for 3 seconds."
]
},
"tip": {
"zh": "Toast 是短暂反馈；需要长期保留或可展开查看时，用通知提醒框或通知中心。",
"en": "Toast is transient feedback; use Notification or Notification Center for persistent messages."
},
"preview": {
"kind": "toast-notification",
"variants": [
{
"type": "success",
"message": {
"zh": "保存成功！",
"en": "Saved successfully!"
},
"icon": "check"
},
{
"type": "error",
"message": {
"zh": "网络连接失败",
"en": "Network error"
},
"icon": "alert"
},
{
"type": "info",
"message": {
"zh": "有 3 条新消息",
"en": "3 new messages"
},
"icon": "info"
}
]
},
"pattern": null
},
{
"id": "badge",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "徽章",
"en": "Badge"
},
"aliases": {
"zh": [
"徽章",
"状态徽章",
"数量徽章",
"badge"
],
"en": [
"Badge",
"status badge",
"count badge",
"notification badge"
]
},
"description": {
"zh": "小尺寸状态或计数标签，用来标记新内容、数量、等级、类别或处理状态。",
"en": "A small dot or pill showing status, count, or category — \"NEW\", \"3\", \"Done\", etc."
},
"prompt": {
"zh": [
"在消息、订单和功能入口旁添加徽章：未读数量用数字徽章，订单状态用状态徽章，新功能用 NEW 徽章，并控制颜色不要喧宾夺主。"
],
"en": [
"Add badges next to inbox, order, and feature entries: use a number badge for unread count, a status badge for order state, and a NEW badge for feature discovery."
]
},
"tip": {
"zh": "徽章贴在内容旁边补充数量或状态；标签用于给内容分类，表单标签用于说明输入项。",
"en": "Badges attach counts or status to content; tags classify content, and labels describe form fields."
},
"preview": {
"kind": "badge-variants",
"items": [
{
"label": {
"zh": "NEW",
"en": "NEW"
},
"variant": "primary"
},
{
"label": {
"zh": "3",
"en": "3"
},
"variant": "danger"
},
{
"label": {
"zh": "已完成",
"en": "Done"
},
"variant": "success"
},
{
"label": {
"zh": "测试版",
"en": "Beta"
},
"variant": "warning"
},
{
"label": {
"zh": "已归档",
"en": "Archived"
},
"variant": "neutral"
}
]
},
"pattern": null
},
{
"id": "avatar",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "头像",
"en": "Avatar"
},
"aliases": {
"zh": [
"头像",
"用户头像",
"个人头像",
"avatar"
],
"en": [
"Avatar",
"user avatar",
"profile image",
"profile avatar"
]
},
"description": {
"zh": "代表用户、成员或账号的圆形图像，也可以用姓名缩写作为缺省状态。",
"en": "A rounded profile picture or initials for a user. Used in chat, reviews, and team lists."
},
"prompt": {
"zh": [
"设计头像组件，包含图片头像、姓名缩写、在线状态、加载失败兜底和头像组排列。"
],
"en": [
"In the reviews section, show a round avatar, name, and star rating side by side."
]
},
"tip": {
"zh": "头像要考虑缺图、重名、深浅背景和小尺寸可识别性。",
"en": "If no image is available, fall back to initials or a default icon."
},
"preview": {
"kind": "avatar-display",
"variants": [
{
"type": "image",
"name": {
"zh": "张三",
"en": "John Doe"
},
"size": "lg"
},
{
"type": "initials",
"name": {
"zh": "李四",
"en": "Jane Smith"
},
"initials": "LS",
"size": "md"
},
{
"type": "icon",
"name": {
"zh": "游客",
"en": "Guest"
},
"size": "sm"
}
],
"group": [
{
"name": {
"zh": "用户 1",
"en": "User 1"
}
},
{
"name": {
"zh": "用户 2",
"en": "User 2"
}
},
{
"name": {
"zh": "用户 3",
"en": "User 3"
}
},
{
"count": 5,
"label": {
"zh": "+5 更多",
"en": "+5 more"
}
}
]
},
"pattern": null
},
{
"id": "tag",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "标签",
"en": "Tag / Chip"
},
"aliases": {
"zh": [
"标签",
"内容标签",
"分类标签",
"chip"
],
"en": [
"Tag",
"Chip",
"content tag",
"category chip"
]
},
"description": {
"zh": "用于标记类别、主题或关键词的小型文本块，帮助用户筛选和理解内容属性。",
"en": "A small pill that shows a category or keyword — e.g., blog categories or skill tags."
},
"prompt": {
"zh": [
"设计标签样式，用于文章分类和筛选条件，包含默认态、选中态、可移除态和数量较多时的换行策略。"
],
"en": [
"Show category tags in a row below each article card."
]
},
"tip": {
"zh": "标签用于分类、筛选或描述内容；如果只是状态或未读数量，用徽章更合适。",
"en": "Tags classify, filter, or describe content; use badges for status or unread counts."
},
"preview": {
"kind": "tag-collection",
"items": [
{
"label": {
"zh": "React",
"en": "React"
},
"color": "#61dafb",
"removable": true
},
{
"label": {
"zh": "TypeScript",
"en": "TypeScript"
},
"color": "#3178c6",
"removable": true
},
{
"label": {
"zh": "Next.js",
"en": "Next.js"
},
"color": "#000000",
"removable": false
},
{
"label": {
"zh": "Tailwind CSS",
"en": "Tailwind CSS"
},
"color": "#06b6d4",
"removable": true
}
],
"addNew": {
"zh": "添加标签",
"en": "Add tag"
}
},
"pattern": null
},
{
"id": "pill",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "胶囊",
"en": "Pill / Capsule"
},
"aliases": {
"zh": [
"胶囊",
"胶囊按钮",
"胶囊标签",
"pill",
"capsule"
],
"en": [
"Pill",
"Capsule",
"pill button",
"pill tag",
"capsule control"
]
},
"description": {
"zh": "一种两端完全圆润的界面形状，常用于按钮、筛选项、标签、状态和分段导航，让控件更轻、更柔和、更容易被识别为可点击。",
"en": "A fully rounded capsule shape used for buttons, filters, tags, status labels, and segmented controls. It makes controls feel softer, lighter, and clearly tappable."
},
"prompt": {
"zh": [
"设计一组胶囊形 UI：包含筛选胶囊、状态胶囊、主按钮和分段导航。使用 9999px 圆角、足够的水平内边距、轻边框、低饱和浅色背景，并给选中、悬停、禁用和可移除状态做清晰区分。避免把整页所有卡片都做成胶囊，只在短文本、动作和状态上使用。"
],
"en": [
"Design a pill-shaped UI set: filter pills, status pills, a primary pill button, and segmented pill navigation. Use 9999px radius, generous horizontal padding, subtle borders, soft low-saturation surfaces, and clear selected, hover, disabled, and removable states. Avoid turning every card into a pill; reserve the shape for short labels, actions, and states."
]
},
"tip": {
"zh": "胶囊是形状语言，不是万能组件。适合短文本和轻操作；如果内容很长、层级很多或需要承载复杂信息，就应该回到普通卡片、按钮或列表。",
"en": "A pill is a shape language, not a universal component. It works for short labels and light actions; long content or complex hierarchy should use cards, buttons, or lists."
},
"preview": {
"kind": "pill-capsule",
"items": [
{
"label": {
"zh": "全部",
"en": "All"
},
"variant": "active"
},
{
"label": {
"zh": "可交互",
"en": "Interactive"
},
"variant": "soft"
},
{
"label": {
"zh": "浅色系",
"en": "Soft UI"
},
"variant": "soft"
},
{
"label": {
"zh": "已发布",
"en": "Published"
},
"variant": "success"
}
],
"actions": [
{
"label": {
"zh": "应用筛选",
"en": "Apply filter"
},
"variant": "primary"
},
{
"label": {
"zh": "清除",
"en": "Clear"
},
"variant": "ghost"
}
]
},
"pattern": null
},
{
"id": "progress",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "进度条",
"en": "Progress Bar"
},
"aliases": {
"zh": [
"进度条",
"进度指示",
"完成度"
],
"en": [
"Progress Bar",
"progress bar",
"progress indicator",
"meter"
]
},
"description": {
"zh": "用条形或环形展示任务进展、上传进度、阅读进度或完成比例。",
"en": "A horizontal bar that visualizes progress. Used for skill levels, poll results, or reading progress."
},
"prompt": {
"zh": [
"设计进度条组件，展示当前进度、百分比、加载中状态、完成状态和异常状态。"
],
"en": [
"Add progress bars to the skills section — e.g., HTML 90%, CSS 80%."
]
},
"tip": {
"zh": "如果无法给出真实进度，不要假装精准百分比，使用加载状态会更诚实。",
"en": "Animating the bar to fill smoothly on load makes it feel polished."
},
"preview": {
"kind": "progress-indicators",
"items": [
{
"label": {
"zh": "上传进度",
"en": "Upload Progress"
},
"value": 75,
"max": 100,
"variant": "primary"
},
{
"label": {
"zh": "安装中",
"en": "Installing"
},
"value": 45,
"max": 100,
"variant": "success"
},
{
"label": {
"zh": "空间使用",
"en": "Storage Used"
},
"value": 890,
"max": 1000,
"unit": "MB",
"variant": "warning"
}
]
},
"pattern": null
},
{
"id": "spinner",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "加载指示器",
"en": "Spinner / Loading"
},
"aliases": {
"zh": [
"加载指示器",
"转圈加载",
"进度转圈",
"spinner"
],
"en": [
"Spinner",
"progress spinner",
"busy indicator",
"circular loader"
]
},
"description": {
"zh": "用于表示系统正在处理的短等待指示器，通常是转圈或小型进度反馈。长时间加载更适合骨架屏或加载状态。",
"en": "A short waiting indicator, often a spinning mark or small progress feedback. Longer loading is better handled with skeletons or loading states."
},
"prompt": {
"zh": [
"设计一个加载指示器，并说明它出现的位置、尺寸、颜色、替代文本和超时后的反馈方式。"
],
"en": [
"Show a spinner in the center of the screen while data is loading."
]
},
"tip": {
"zh": "Spinner 只能说明“正在等”，不能说明“等多久”；长任务需要进度、步骤或骨架屏。",
"en": "Switching to a skeleton screen (see below) for longer loads greatly improves perceived performance."
},
"preview": {
"kind": "spinner-loaders",
"variants": [
{
"size": "sm",
"label": {
"zh": "加载中...",
"en": "Loading..."
}
},
{
"size": "md",
"label": {
"zh": "处理中...",
"en": "Processing..."
}
},
{
"size": "lg",
"label": {
"zh": "正在同步数据",
"en": "Syncing data"
}
}
],
"withText": true
},
"pattern": null
},
{
"id": "carousel",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "轮播图",
"en": "Carousel"
},
"aliases": {
"zh": [
"轮播图",
"轮播组件",
"图片轮播",
"内容轮播"
],
"en": [
"Carousel",
"image carousel",
"content carousel",
"carousel component"
]
},
"description": {
"zh": "在有限空间内横向切换多张图片或卡片，常用于案例、推荐内容和产品展示。",
"en": "A UI that cycles through images or cards by scrolling horizontally. Used for hero visuals, testimonials, and product showcases."
},
"prompt": {
"zh": [
"设计一个轮播组件，包含上一张、下一张、分页点、自动播放控制、滑动手势和暂停规则。"
],
"en": [
"Add a carousel to the testimonials section with 5-second autoplay and left/right arrow buttons."
]
},
"tip": {
"zh": "轮播图是多张内容的切换展示；如果是拖动选择数值，应使用滑块。",
"en": "Carousel rotates through content; use Slider for dragging to choose a numeric value."
},
"preview": {
"kind": "carousel-slider",
"items": [
{
"title": {
"zh": "幻灯片 1",
"en": "Slide 1"
},
"color": "#3b82f6",
"active": true
},
{
"title": {
"zh": "幻灯片 2",
"en": "Slide 2"
},
"color": "#8b5cf6",
"active": false
},
{
"title": {
"zh": "幻灯片 3",
"en": "Slide 3"
},
"color": "#ec4899",
"active": false
}
],
"indicators": true,
"controls": {
"prev": {
"zh": "上一张",
"en": "Previous"
},
"next": {
"zh": "下一张",
"en": "Next"
}
}
},
"pattern": null
},
{
"id": "divider",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "分隔线",
"en": "Divider / Separator"
},
"aliases": {
"zh": [
"分隔线",
"分割线",
"内容分隔"
],
"en": [
"Divider / Separator",
"divider",
"separator",
"hr",
"rule"
]
},
"description": {
"zh": "用细线或留白把相邻内容区分开，帮助用户理解分组和层级。",
"en": "A horizontal line that visually separates content — between sections or list items."
},
"prompt": {
"zh": [
"为列表和页面区块添加克制的分隔线，控制颜色、粗细、间距，并避免让页面显得割裂。"
],
"en": [
"Add a thin divider between sections in a light gray."
]
},
"tip": {
"zh": "能用间距解决的分隔，不一定要加线；线太多会让界面变碎。",
"en": "A modern look often uses whitespace instead of a visible line — say which you prefer."
},
"preview": {
"kind": "divider-styles",
"variants": [
{
"type": "solid",
"label": {
"zh": "实线分隔",
"en": "Solid"
}
},
{
"type": "dashed",
"label": {
"zh": "虚线分隔",
"en": "Dashed"
}
},
{
"type": "text",
"label": {
"zh": "或",
"en": "OR"
},
"text": {
"zh": "或",
"en": "OR"
}
},
{
"type": "gradient",
"label": {
"zh": "渐变分隔",
"en": "Gradient"
}
}
]
},
"pattern": null
},
{
"id": "skeleton",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Parts"
},
"title": {
"zh": "骨架屏",
"en": "Skeleton Screen"
},
"aliases": {
"zh": [
"骨架屏",
"加载骨架",
"内容骨架",
"skeleton screen"
],
"en": [
"Skeleton Screen",
"loading skeleton",
"content skeleton",
"skeleton loader"
]
},
"description": {
"zh": "加载内容前先展示大致结构的占位块，让用户感知页面正在逐步出现。",
"en": "A loading state that shows gray blocks in the shape of the incoming content. Feels faster than a spinner."
},
"prompt": {
"zh": [
"为卡片列表设计骨架屏，形状要接近真实内容，并在数据加载完成后平滑替换。"
],
"en": [
"Show a skeleton screen while data loads — gray bars for text rows and a circle for the avatar."
]
},
"tip": {
"zh": "骨架屏模拟即将出现的内容结构；表单输入框里的提示文字才叫占位文本。",
"en": "Skeletons mimic upcoming content structure; placeholder text belongs inside form fields."
},
"preview": {
"kind": "skeleton-loading",
"elements": [
{
"type": "avatar",
"size": "lg"
},
{
"type": "text",
"lines": 2,
"width": "80%"
},
{
"type": "button",
"width": "120px"
}
],
"animated": true,
"description": {
"zh": "内容加载占位符",
"en": "Content loading placeholder"
}
},
"pattern": null
},
{
"id": "input",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Form"
},
"title": {
"zh": "输入框",
"en": "Input / Text Field"
},
"aliases": {
"zh": [
"输入框",
"文本输入",
"文本字段",
"单行输入"
],
"en": [
"Input / Text Field",
"input",
"text field",
"text box"
]
},
"description": {
"zh": "用于输入单行文本的表单控件，常见于姓名、邮箱、搜索、标题和短答案。",
"en": "A single-line text input. Used for names, emails, search queries, and similar fields."
},
"prompt": {
"zh": [
"为联系表单添加姓名和邮箱输入框，包含标签、占位示例、必填标记、聚焦态和错误提示。"
],
"en": [
"Add Name and Email input fields to the contact form."
]
},
"tip": {
"zh": "输入框最好同时有 label 和 placeholder：label 说明字段是什么，placeholder 只提供示例。",
"en": "Use a placeholder for example text and a label above the field — both together is the friendly pattern."
},
"preview": {
"kind": "input-states",
"fields": [
{
"state": "default",
"label": {
"zh": "邮箱地址",
"en": "Email address"
},
"placeholder": {
"zh": "请输入邮箱",
"en": "Enter your email"
}
},
{
"state": "focused",
"label": {
"zh": "用户名",
"en": "Username"
},
"value": {
"zh": "zhangsan",
"en": "johndoe"
}
},
{
"state": "error",
"label": {
"zh": "密码",
"en": "Password"
},
"error": {
"zh": "密码至少 8 位",
"en": "At least 8 characters"
}
}
]
},
"pattern": null
},
{
"id": "textarea",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Form"
},
"title": {
"zh": "文本域",
"en": "Textarea"
},
"aliases": {
"zh": [
"文本域",
"多行输入",
"长文本输入",
"消息字段"
],
"en": [
"Textarea",
"textarea",
"multi-line input",
"message field"
]
},
"description": {
"zh": "用于输入多行文本的表单控件，适合留言、简介、备注、评论和需求描述。",
"en": "A large multi-line input — typically the Message field on a contact form."
},
"prompt": {
"zh": [
"为联系表单添加 5 行文本域，支持输入长消息，并限制最大字数和显示剩余字数。"
],
"en": [
"Add a 5-row textarea to the contact form."
]
},
"tip": {
"zh": "文本域要说明默认高度、是否可拖拽调整大小，以及长内容是否需要字数限制。",
"en": "You can also specify whether the user can resize it."
},
"preview": {
"kind": "textarea-field",
"label": {
"zh": "反馈内容",
"en": "Feedback"
},
"placeholder": {
"zh": "请输入您的反馈意见...",
"en": "Enter your feedback..."
},
"rows": 4,
"value": {
"zh": "这是一个多行文本输入框示例。\n可以输入多行内容。",
"en": "This is a textarea example.\nYou can enter multiple lines."
},
"charCount": {
"current": 28,
"max": 500
},
"helperText": {
"zh": "最多 500 字符",
"en": "Max 500 characters"
}
},
"pattern": null
},
{
"id": "checkbox",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Form"
},
"title": {
"zh": "复选框",
"en": "Checkbox"
},
"aliases": {
"zh": [
"复选框",
"多选框",
"勾选项"
],
"en": [
"Checkbox",
"checkbox",
"multi-select"
]
},
"description": {
"zh": "用于开启/关闭某个选项，或从多个选项中选择任意多个。",
"en": "A square box that supports multiple selections — used for terms agreement and multi-option picks."
},
"prompt": {
"zh": [
"添加“我同意服务条款”复选框，未勾选时禁用提交按钮，并在提交时给出明确提示。"
],
"en": [
"Add an \"I agree to the terms\" checkbox and disable the submit button until it's checked."
]
},
"tip": {
"zh": "复选框可以多选；如果一组选项只能选一个，用 radio 或 segmented control 更合适。",
"en": "Checkboxes allow multiple selections; radio buttons allow only one. Easy to confuse — be explicit."
},
"preview": {
"kind": "checkbox-group",
"label": {
"zh": "选择你的兴趣",
"en": "Select your interests"
},
"options": [
{
"id": "design",
"label": {
"zh": "设计",
"en": "Design"
},
"checked": true
},
{
"id": "development",
"label": {
"zh": "开发",
"en": "Development"
},
"checked": true
},
{
"id": "marketing",
"label": {
"zh": "营销",
"en": "Marketing"
},
"checked": false
}
]
},
"pattern": null
},
{
"id": "radio",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Form"
},
"title": {
"zh": "单选按钮",
"en": "Radio Button"
},
"aliases": {
"zh": [
"单选按钮",
"单选项",
"互斥选择",
"radio button"
],
"en": [
"Radio Button",
"radio option",
"exclusive choice",
"radio group item"
]
},
"description": {
"zh": "用于在一组选项中只选择一个，适合套餐、性别、配送方式、优先级等互斥选择。",
"en": "Round buttons where only one option can be selected. Good for exclusive choices like gender or plan."
},
"prompt": {
"zh": [
"用单选按钮展示套餐选择：标准版、高级版、企业版，并显示当前选中项说明。"
],
"en": [
"Use radio buttons for plan selection: Standard, Premium, Enterprise."
]
},
"tip": {
"zh": "Radio 用于少量互斥选项直接展示；选项很多或需要收起时，用 Select。",
"en": "Radio shows a small set of exclusive choices directly; use Select when options are many or need to be collapsed."
},
"preview": {
"kind": "radio-group",
"label": {
"zh": "选择配送方式",
"en": "Choose shipping method"
},
"options": [
{
"id": "standard",
"label": {
"zh": "标准配送",
"en": "Standard"
},
"desc": {
"zh": "5-7 个工作日",
"en": "5-7 business days"
},
"price": {
"zh": "免费",
"en": "Free"
},
"selected": true
},
{
"id": "express",
"label": {
"zh": "快速配送",
"en": "Express"
},
"desc": {
"zh": "2-3 个工作日",
"en": "2-3 business days"
},
"price": {
"zh": "¥20",
"en": "$5"
},
"selected": false
},
{
"id": "overnight",
"label": {
"zh": "隔日送达",
"en": "Overnight"
},
"desc": {
"zh": "次日送达",
"en": "Next day"
},
"price": {
"zh": "¥50",
"en": "$15"
},
"selected": false
}
]
},
"pattern": null
},
{
"id": "select",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Form"
},
"title": {
"zh": "选择器",
"en": "Select"
},
"aliases": {
"zh": [
"选择器",
"下拉选择",
"选项选择",
"select 控件"
],
"en": [
"Select",
"select field",
"option select",
"select control"
]
},
"description": {
"zh": "用于从预设选项中选择一个或多个值，适合国家、分类、状态和数量较少的固定选项。",
"en": "A form element that reveals a list of options on click. Used for country, category, and similar pickers."
},
"prompt": {
"zh": [
"添加国家/地区选择器，包含默认占位项、已选状态、错误提示和移动端可用样式。"
],
"en": [
"Add a country selector as a select dropdown."
]
},
"tip": {
"zh": "Select 用于从选项里选一个值；如果是点击后展示操作菜单，应使用下拉菜单。",
"en": "Select is for choosing a value from options; use Dropdown when opening an action menu."
},
"preview": {
"kind": "select-field",
"label": {
"zh": "选择国家/地区",
"en": "Select Country"
},
"placeholder": {
"zh": "请选择...",
"en": "Please select..."
},
"selected": {
"zh": "中国",
"en": "China"
},
"options": [
{
"value": "cn",
"label": {
"zh": "中国",
"en": "China"
},
"flag": "🇨🇳"
},
{
"value": "us",
"label": {
"zh": "美国",
"en": "United States"
},
"flag": "🇺🇸"
},
{
"value": "jp",
"label": {
"zh": "日本",
"en": "Japan"
},
"flag": "🇯🇵"
},
{
"value": "uk",
"label": {
"zh": "英国",
"en": "United Kingdom"
},
"flag": "🇬🇧"
}
]
},
"pattern": null
},
{
"id": "toggle",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Form"
},
"title": {
"zh": "开关",
"en": "Toggle Switch"
},
"aliases": {
"zh": [
"开关",
"切换开关",
"开/关控件",
"Switch"
],
"en": [
"Toggle Switch",
"toggle",
"switch",
"on/off"
]
},
"description": {
"zh": "用于立即切换某个二元设置，例如深色模式、通知开关、公开状态或自动保存。",
"en": "A sliding on/off switch. Used for dark mode, notification settings, and similar binary controls."
},
"prompt": {
"zh": [
"在设置页添加通知开关，切换后立即保存状态，并用 Toast 告诉用户是否保存成功。"
],
"en": [
"Add a dark mode toggle switch to the header."
]
},
"tip": {
"zh": "开关通常表示立即生效；如果需要点提交按钮才保存，复选框会更符合预期。",
"en": "Similar to a checkbox, but a toggle implies \"applies instantly\" while a checkbox implies \"applied on submit\"."
},
"preview": {
"kind": "toggle-switch",
"items": [
{
"label": {
"zh": "接收邮件通知",
"en": "Email notifications"
},
"checked": true,
"description": {
"zh": "新消息时发送邮件",
"en": "Get emails for new messages"
}
},
{
"label": {
"zh": "桌面通知",
"en": "Desktop notifications"
},
"checked": false,
"description": {
"zh": "在桌面显示通知",
"en": "Show desktop alerts"
}
},
{
"label": {
"zh": "夜间模式",
"en": "Dark mode"
},
"checked": true,
"description": {
"zh": "使用深色主题",
"en": "Use dark theme"
}
}
]
},
"pattern": null
},
{
"id": "label",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Form"
},
"title": {
"zh": "表单标签",
"en": "Label"
},
"aliases": {
"zh": [
"表单标签",
"字段标签",
"输入标签"
],
"en": [
"Label",
"label",
"field label",
"form label"
]
},
"description": {
"zh": "说明输入字段含义的文本，通常位于控件上方或左侧，是表单可读性和无障碍的基础。",
"en": "The field name shown above or next to an input — telling users what to enter."
},
"prompt": {
"zh": [
"为每个表单字段添加清晰标签，必填项显示星号，并让点击标签时聚焦对应输入框。"
],
"en": [
"Show a label above each input. Add a red asterisk (*) for required fields."
]
},
"tip": {
"zh": "不要只靠 placeholder 当标签；用户输入后 placeholder 会消失，字段含义也会跟着丢失。",
"en": "Use the for attribute so clicking the label focuses the input — much more usable."
},
"preview": {
"kind": "form-label",
"examples": [
{
"label": {
"zh": "用户名",
"en": "Username"
},
"required": true
},
{
"label": {
"zh": "邮箱地址",
"en": "Email Address"
},
"required": true,
"helper": {
"zh": "我们不会分享您的邮箱",
"en": "We will never share your email"
}
},
{
"label": {
"zh": "备注",
"en": "Notes"
},
"required": false,
"helper": {
"zh": "可选填写",
"en": "Optional"
}
}
]
},
"pattern": null
},
{
"id": "placeholder",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Form"
},
"title": {
"zh": "占位文本",
"en": "Placeholder"
},
"aliases": {
"zh": [
"占位文本",
"占位符",
"输入示例",
"提示文本"
],
"en": [
"Placeholder",
"placeholder",
"hint text",
"example text"
]
},
"description": {
"zh": "输入框为空时显示的示例或格式提示，用户开始输入后通常会消失。",
"en": "Faded example text inside an input that disappears once the user starts typing."
},
"prompt": {
"zh": [
"为邮箱字段添加占位示例 example@email.com，并用标签说明这是邮箱地址。"
],
"en": [
"Use \"example@email.com\" as the placeholder for the email field."
]
},
"tip": {
"zh": "placeholder 适合举例，不适合承载必读说明；关键规则应该放在标签、说明或错误提示里。",
"en": "Never rely on placeholders alone instead of labels — use both. That's the best practice."
},
"preview": {
"kind": "placeholder-demo",
"fields": [
{
"type": "text",
"placeholder": {
"zh": "输入用户名...",
"en": "Enter username..."
}
},
{
"type": "email",
"placeholder": {
"zh": "name@example.com",
"en": "name@example.com"
}
},
{
"type": "password",
"placeholder": {
"zh": "至少 8 个字符",
"en": "At least 8 characters"
}
},
{
"type": "search",
"placeholder": {
"zh": "搜索文章、标签...",
"en": "Search articles, tags..."
}
}
]
},
"pattern": null
},
{
"id": "validation",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Form"
},
"title": {
"zh": "表单校验",
"en": "Validation"
},
"aliases": {
"zh": [
"表单校验",
"输入校验",
"错误提示",
"验证规则"
],
"en": [
"Validation",
"validation",
"form validation",
"error messages"
]
},
"description": {
"zh": "检查输入是否符合要求，并在缺失、格式错误或超出限制时给出明确反馈。",
"en": "Checks that user input is valid. If not, shows a red error like \"Email address is not valid\"."
},
"prompt": {
"zh": [
"添加表单校验：必填字段为空时提示，邮箱格式错误时提示，并在提交前阻止无效数据。"
],
"en": [
"Add validation: flag empty required fields and check that emails are in valid format."
]
},
"tip": {
"zh": "要说明是输入时实时校验、失焦后校验，还是提交时校验；不同方式给用户的打扰程度不同。",
"en": "Two flavors: real-time validation (as they type) and on-submit validation. Say which you want."
},
"preview": {
"kind": "validation-states",
"fields": [
{
"label": {
"zh": "邮箱",
"en": "Email"
},
"value": "user@example.com",
"state": "valid",
"message": {
"zh": "格式正确",
"en": "Valid format"
}
},
{
"label": {
"zh": "密码",
"en": "Password"
},
"value": "123",
"state": "error",
"message": {
"zh": "密码太短（至少 8 位）",
"en": "Too short (min 8 chars)"
}
},
{
"label": {
"zh": "用户名",
"en": "Username"
},
"value": "checking...",
"state": "validating",
"message": {
"zh": "检查可用性...",
"en": "Checking availability..."
}
}
]
},
"pattern": null
},
{
"id": "hover",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "悬停",
"en": "Hover"
},
"aliases": {
"zh": [
"悬停",
"鼠标悬停",
"hover 状态"
],
"en": [
"Hover",
"hover",
"mouseover",
"rollover"
]
},
"description": {
"zh": "鼠标指针停在元素上时出现的状态变化，常用于按钮、卡片、链接和菜单项。",
"en": "The state when the cursor is over an element. Typically triggers a color change, lift, or underline."
},
"prompt": {
"zh": [
"为卡片添加 hover 状态：轻微上移、阴影增强、边框变清晰，并保持移动端有按下态反馈。"
],
"en": [
"Darken the button slightly on hover.",
"On hover, strengthen the card's shadow to make it lift."
]
},
"tip": {
"zh": "移动端没有真正的 hover，所以需要同时设计 active 或 pressed 状态。",
"en": "Mobile has no hover — also define an :active (pressed) state as a fallback."
},
"preview": {
"kind": "hover-effects",
"items": [
{
"label": {
"zh": "悬停变色",
"en": "Color Change"
},
"effect": "color"
},
{
"label": {
"zh": "悬停缩放",
"en": "Scale Up"
},
"effect": "scale"
},
{
"label": {
"zh": "悬停阴影",
"en": "Shadow"
},
"effect": "shadow"
},
{
"label": {
"zh": "悬停下划线",
"en": "Underline"
},
"effect": "underline"
}
],
"description": {
"zh": "鼠标悬停时的视觉反馈",
"en": "Visual feedback on mouse hover"
}
},
"pattern": null
},
{
"id": "click",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "点击 / 轻触",
"en": "Click / Tap"
},
"aliases": {
"zh": [
"点击",
"轻触",
"单击",
"tap"
],
"en": [
"Click / Tap",
"click",
"tap",
"onclick"
]
},
"description": {
"zh": "用户用鼠标或触摸触发操作的基础交互，常用于按钮、链接、卡片和菜单项。",
"en": "Clicking with a mouse or tapping on mobile — the basic interaction for buttons and links."
},
"prompt": {
"zh": [
"点击卡片时打开详情弹窗，点击关闭按钮或遮罩时关闭，并避免误触内部按钮。"
],
"en": [
"Open a modal when the button is clicked.",
"Zoom the image on tap."
]
},
"tip": {
"zh": "点击行为要说明结果：打开、提交、切换、复制、删除，不能只说“加点击效果”。",
"en": "Click events are JavaScript territory — CSS alone can't fully handle them."
},
"preview": {
"kind": "click-interactions",
"items": [
{
"label": {
"zh": "点击计数",
"en": "Click Count"
},
"count": 0,
"action": {
"zh": "点击我",
"en": "Click Me"
}
},
{
"label": {
"zh": "波纹效果",
"en": "Ripple Effect"
},
"effect": "ripple"
},
{
"label": {
"zh": "按下反馈",
"en": "Press Feedback"
},
"effect": "pressed"
}
]
},
"pattern": null
},
{
"id": "scroll",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "滚动",
"en": "Scroll"
},
"aliases": {
"zh": [
"滚动",
"滚动行为",
"页面滚动",
"scroll"
],
"en": [
"Scroll",
"scroll behavior",
"page scroll",
"scrolling"
]
},
"description": {
"zh": "页面或容器在垂直、水平轴上的移动行为，也可以触发吸顶、进入动画、目录高亮等效果。",
"en": "Moving the page vertically (or horizontally). Scroll-linked animations and parallax effects are popular."
},
"prompt": {
"zh": [
"当区块滚动进入视口时，让内容轻微上移并淡入，同时保持移动端滚动流畅。"
],
"en": [
"Fade sections in as they come into view on scroll."
]
},
"tip": {
"zh": "滚动关注页面如何移动和定位；滚动动画是滚动过程中触发的视觉反馈。",
"en": "Scroll is about page movement and position; scroll animation is visual feedback triggered during scrolling."
},
"preview": {
"kind": "scroll-behaviors",
"items": [
{
"label": {
"zh": "回到顶部",
"en": "Back to Top"
},
"type": "scroll-to-top"
},
{
"label": {
"zh": "平滑滚动",
"en": "Smooth Scroll"
},
"type": "smooth"
},
{
"label": {
"zh": "视差滚动",
"en": "Parallax Scroll"
},
"type": "parallax"
},
{
"label": {
"zh": "无限滚动",
"en": "Infinite Scroll"
},
"type": "infinite"
}
]
},
"pattern": null
},
{
"id": "transition",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "过渡",
"en": "Transition"
},
"aliases": {
"zh": [
"过渡",
"平滑变化"
],
"en": [
"Transition",
"transition",
"smooth change"
]
},
"description": {
"zh": "让颜色、尺寸、位置、透明度等状态变化变得平滑，常用于 hover、focus、展开收起和主题切换。",
"en": "Smooths the change of CSS properties. Instead of snapping, colors, sizes, and positions ease into their new values."
},
"prompt": {
"zh": [
"为按钮的 hover、focus 和 pressed 状态添加 160-220ms 过渡，只作用于 color、background-color、border-color、box-shadow 和 transform，并尊重 prefers-reduced-motion。"
],
"en": [
"Add a 160-220ms transition for button hover, focus, and pressed states, limited to color, background-color, border-color, box-shadow, and transform."
]
},
"tip": {
"zh": "过渡要控制属性和时长，不要无脑写 transition: all，复杂页面里容易带来意外动画。",
"en": "Avoid transition: all on complex screens; name the properties and duration so unexpected layout animation does not appear."
},
"preview": {
"kind": "transition-effects",
"examples": [
{
"property": "opacity",
"duration": "300ms",
"from": 0,
"to": 1
},
{
"property": "transform",
"duration": "500ms",
"from": "translateY(20px)",
"to": "translateY(0)"
},
{
"property": "color",
"duration": "200ms",
"from": "#64748b",
"to": "#3b82f6"
}
],
"timing": [
"ease",
"ease-in",
"ease-out",
"ease-in-out"
]
},
"pattern": null
},
{
"id": "animation",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "动画",
"en": "Animation"
},
"aliases": {
"zh": [
"动画",
"动效",
"运动效果",
"motion"
],
"en": [
"Animation",
"motion",
"motion design",
"UI animation"
]
},
"description": {
"zh": "比 transition 更完整的运动序列，可以包含淡入、滑入、弹跳、旋转、循环和分阶段变化。",
"en": "Visual effects that make elements move — fade-in, slide-in, bounce, rotate. More expressive than transitions."
},
"prompt": {
"zh": [
"页面首次加载时让 Logo 和标题轻微淡入并上移 8px，动画只播放一次，时长不超过 500ms；开启 reduced motion 时改为无位移淡入。"
],
"en": [
"On first load, fade the logo and heading in while moving them up 8px once, under 500ms; with reduced motion, use opacity only."
]
},
"tip": {
"zh": "动画是总入口；关键帧、缓动、时长、错峰等是具体组成部分。",
"en": "Animation is the overview; keyframes, easing, duration, and stagger are specific parts."
},
"preview": {
"kind": "animation-demos",
"items": [
{
"name": {
"zh": "淡入",
"en": "Fade In"
},
"type": "fadeIn",
"duration": "1s"
},
{
"name": {
"zh": "滑入",
"en": "Slide In"
},
"type": "slideIn",
"duration": "0.5s"
},
{
"name": {
"zh": "弹跳",
"en": "Bounce"
},
"type": "bounce",
"duration": "1s",
"infinite": true
},
{
"name": {
"zh": "旋转",
"en": "Spin"
},
"type": "spin",
"duration": "2s",
"infinite": true
}
]
},
"pattern": null
},
{
"id": "keyframes",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "关键帧",
"en": "Keyframes"
},
"aliases": {
"zh": [
"关键帧",
"关键帧动画",
"@keyframes"
],
"en": [
"Keyframes",
"@keyframes",
"animation frames"
]
},
"description": {
"zh": "把动画拆成几个时间点上的状态，比如 0% 开始、50% 中间、100% 结束，适合循环、弹跳、呼吸和加载等完整运动。",
"en": "Defines states at specific points in time, such as 0% start, 50% middle, and 100% end. Useful for loops, bounce, pulse, and loaders."
},
"prompt": {
"zh": [
"用 keyframes 写一个轻微呼吸动画：0% 缩小且半透明，50% 放大到 1.04 且完全显示，100% 回到正常大小，并支持 reduced motion 关闭。"
],
"en": [
"Create a subtle keyframes pulse: at 0% slightly smaller and translucent, at 50% scale to 1.04 and fully visible, at 100% return to normal, with reduced-motion support."
]
},
"tip": {
"zh": "过渡适合状态变化，关键帧适合一段完整动作或循环动作。",
"en": "Use transitions for state changes; use keyframes for complete or looping motion."
},
"preview": {
"kind": "keyframes-timeline",
"frames": [
{
"percent": "0%",
"label": {
"zh": "开始",
"en": "Start"
},
"transform": "scale(0.96) translateY(8px)",
"opacity": "0.45"
},
{
"percent": "50%",
"label": {
"zh": "中间",
"en": "Middle"
},
"transform": "scale(1.04) translateY(0)",
"opacity": "1"
},
{
"percent": "100%",
"label": {
"zh": "结束",
"en": "End"
},
"transform": "scale(1) translateY(0)",
"opacity": "0.8"
}
]
},
"pattern": null
},
{
"id": "easing",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "缓动",
"en": "Easing"
},
"aliases": {
"zh": [
"缓动",
"缓动曲线",
"ease"
],
"en": [
"Easing",
"ease",
"timing function"
]
},
"description": {
"zh": "控制动画速度如何变化：什么时候快、什么时候慢，决定同样时长下的手感差异。",
"en": "Controls how motion speed changes: when it speeds up or slows down, shaping feel within the same duration."
},
"prompt": {
"zh": [
"为弹窗入场使用 ease-out 220ms，离场使用 ease-in 160ms；如果是按钮反馈才允许轻微 spring，避免所有动画都弹跳。"
],
"en": [
"Use ease-out at 220ms for modal entrance and ease-in at 160ms for exit; reserve subtle spring for button feedback instead of making every motion bounce."
]
},
"tip": {
"zh": "缓动不是“更花哨”，而是速度分配。入场常用 ease-out，离场常用 ease-in。",
"en": "Easing is speed distribution, not decoration. Entrance often uses ease-out; exit often uses ease-in."
},
"preview": {
"kind": "easing-curves",
"curves": [
{
"label": {
"zh": "匀速",
"en": "Linear"
},
"name": "linear",
"x": 50,
"note": {
"zh": "速度平均，容易显得机械",
"en": "Even speed can feel mechanical"
}
},
{
"label": {
"zh": "先快后慢",
"en": "Ease out"
},
"name": "ease-out",
"x": 76,
"note": {
"zh": "入场更自然，最后停稳",
"en": "Natural entrance that settles"
}
},
{
"label": {
"zh": "先慢后快",
"en": "Ease in"
},
"name": "ease-in",
"x": 28,
"note": {
"zh": "离场更轻，不拖泥带水",
"en": "Light exit without dragging"
}
},
{
"label": {
"zh": "轻微弹性",
"en": "Spring"
},
"name": "spring",
"x": 88,
"note": {
"zh": "适合小反馈，不适合大面板",
"en": "Good for small feedback, not large panels"
}
}
]
},
"pattern": null
},
{
"id": "motion-duration",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "动效时长",
"en": "Motion Duration"
},
"aliases": {
"zh": [
"动效时长",
"动画时间",
"duration"
],
"en": [
"Motion duration",
"duration",
"animation timing"
]
},
"description": {
"zh": "动效时长决定动作给人的速度感。同一个位移，120ms 像快速反馈，220ms 像自然过渡，500ms 更像页面入场或引导。",
"en": "Motion duration shapes how fast an action feels. The same movement feels like quick feedback at 120ms, natural transition at 220ms, and page reveal or guidance at 500ms."
},
"prompt": {
"zh": [
"把动效时长分层：按钮反馈 120ms，菜单/弹窗 200-240ms，页面区块入场不超过 500ms；不要所有动画都用同一个时长。"
],
"en": [
"Layer motion duration: 120ms for button feedback, 200-240ms for menus or modals, under 500ms for page section reveals; do not use one duration for every animation."
]
},
"tip": {
"zh": "小反馈短一点，大范围位移可以稍长，但多数界面动画不应超过 500ms。",
"en": "Small feedback should be fast; larger movement can be longer, but most UI motion should stay under 500ms."
},
"preview": {
"kind": "motion-duration-scale",
"durations": [
{
"label": {
"zh": "快反馈",
"en": "Fast feedback"
},
"duration": "120ms",
"use": {
"zh": "按钮、开关、点击确认",
"en": "Buttons, toggles, click feedback"
}
},
{
"label": {
"zh": "标准过渡",
"en": "Standard transition"
},
"duration": "220ms",
"use": {
"zh": "弹窗、菜单、面板入场",
"en": "Modal, menu, panel entrance"
}
},
{
"label": {
"zh": "慢入场",
"en": "Slow reveal"
},
"duration": "500ms",
"use": {
"zh": "页面区块、引导展示",
"en": "Page section, guided reveal"
}
}
]
},
"pattern": null
},
{
"id": "stagger",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "错峰动画",
"en": "Stagger"
},
"aliases": {
"zh": [
"错峰动画",
"依次出现",
"stagger"
],
"en": [
"Stagger",
"staggered animation",
"sequential reveal"
]
},
"description": {
"zh": "让一组元素按短间隔依次变化，用节奏降低同时变化带来的拥挤感。它是通用节奏概念，不限于入场。",
"en": "Makes a group of elements change with short offsets, using rhythm to reduce visual crowding. It is a general timing concept, not only entrance motion."
},
"prompt": {
"zh": [
"为一组状态变化设置 stagger：每项延迟 40-80ms，总延迟封顶 300ms；长列表只对首屏或当前分组使用。"
],
"en": [
"Apply stagger to a group change: delay each item by 40-80ms, cap total delay at 300ms, and use it only for the first viewport or current group in long lists."
]
},
"tip": {
"zh": "错峰是通用节奏；“错落进场”是它在入场动画里的具体用法。",
"en": "Stagger is the general rhythm; staggered entrance is its entrance-animation use."
},
"preview": {
"kind": "stagger-rhythm",
"delays": [
{
"label": "0ms",
"width": "22%"
},
{
"label": "60ms",
"width": "46%"
},
{
"label": "120ms",
"width": "70%"
},
{
"label": "180ms",
"width": "88%"
}
]
},
"pattern": null
},
{
"id": "entrance-animation",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "入场动画",
"en": "Entrance Animation"
},
"aliases": {
"zh": [
"入场动画",
"出现动画",
"进入动效"
],
"en": [
"Entrance animation",
"enter motion",
"reveal"
]
},
"description": {
"zh": "新内容第一次出现时的轻量动效，用来把用户视线带到正确位置。重点是落点明确，而不是动作夸张。",
"en": "Light motion when new content first appears, guiding attention to the right place. The key is a clear landing point, not dramatic movement."
},
"prompt": {
"zh": [
"为新打开的详情面板设计入场：从触发区域附近淡入并上移 8px，220ms ease-out，停稳后不要继续晃动。"
],
"en": [
"Design entrance for a newly opened detail panel: fade in near the trigger area with an 8px upward motion, 220ms ease-out, and stop cleanly after settling."
]
},
"tip": {
"zh": "入场动画应该回答“新东西在哪里”，不是让所有元素从屏幕边缘飞进来。",
"en": "Entrance motion should answer where the new thing is, not make every element fly in from the screen edge."
},
"preview": {
"kind": "entrance-attention",
"moments": [
{
"label": {
"zh": "新面板",
"en": "New panel"
},
"target": {
"zh": "右侧详情",
"en": "Side detail"
}
},
{
"label": {
"zh": "提示条",
"en": "Toast"
},
"target": {
"zh": "顶部反馈",
"en": "Top feedback"
}
},
{
"label": {
"zh": "新增行",
"en": "New row"
},
"target": {
"zh": "列表当前位置",
"en": "Current list position"
}
}
]
},
"pattern": null
},
{
"id": "exit-animation",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "离场动画",
"en": "Exit Animation"
},
"aliases": {
"zh": [
"离场动画",
"消失动画",
"退出动效"
],
"en": [
"Exit animation",
"leave motion",
"dismiss motion"
]
},
"description": {
"zh": "元素关闭或离开页面时的短动效。它的重点不是表演，而是让用户确认“这个东西正在被移除”。",
"en": "A short motion used when an element closes or leaves. Its job is not performance, but confirming that the element is being removed."
},
"prompt": {
"zh": [
"设计离场动画：用户点击关闭后，面板在 120-160ms 内轻微淡出并缩小到 98%，动画结束后再移除 DOM，避免突然消失。"
],
"en": [
"Design an exit animation: after close, fade the panel and scale to 98% within 120-160ms, then remove it from the DOM after the animation so it does not vanish abruptly."
]
},
"tip": {
"zh": "离场通常比入场更短，因为用户已经发起了操作。",
"en": "Exit is usually shorter than entrance because the user already initiated the action."
},
"preview": {
"kind": "exit-animation-flow",
"steps": [
{
"label": {
"zh": "显示中",
"en": "Visible"
},
"note": {
"zh": "内容还在界面里",
"en": "Content is still on screen"
}
},
{
"label": {
"zh": "离场中",
"en": "Exiting"
},
"note": {
"zh": "先淡出并轻微缩小",
"en": "Fade and scale down first"
}
},
{
"label": {
"zh": "已移除",
"en": "Removed"
},
"note": {
"zh": "最后再从布局消失",
"en": "Then remove from layout"
}
}
]
},
"pattern": null
},
{
"id": "loading-animation",
"category": "feedback",
"category_label": {
"zh": "反馈",
"en": "Feedback"
},
"title": {
"zh": "加载动画",
"en": "Loading Animation"
},
"aliases": {
"zh": [
"加载动画",
"等待动效",
"加载反馈",
"loading animation"
],
"en": [
"Loading Animation",
"loading motion",
"waiting animation",
"loading feedback"
]
},
"description": {
"zh": "数据或资源还没准备好时的等待反馈。短等待可以用小 spinner，中等待适合步骤或进度；AI 检索或生成可用思考提示，但不能伪装成完成进度；长等待需要骨架、说明和重试。",
"en": "Waiting feedback while data or assets are not ready. Short waits can use a small spinner, medium waits use steps or progress; AI retrieval or generation can use a thinking signal without faking completion; long waits need skeletons, copy, and retry."
},
"prompt": {
"zh": [
"按等待时长设计加载反馈：1 秒内使用按钮内 spinner，1-2 秒显示真实步骤或进度；AI 检索或生成时使用低频点阵轨道和“正在整理上下文”的说明，不能伪造百分比；超过 3 秒显示骨架、说明文案和重试入口。"
],
"en": [
"Design loading feedback by wait length: use an in-button spinner under 1s, real steps or progress for 1-2s; for AI retrieval or generation, use a low-frequency dotted orbit with contextual copy and never fake a percentage; after 3s, show a skeleton, explanatory copy, and retry."
]
},
"tip": {
"zh": "加载动画的目的不是填空白，而是让用户知道系统还在工作，以及接下来能做什么。",
"en": "Loading motion is not for filling blank space; it tells users the system is working and what they can do next."
},
"preview": {
"kind": "loading-feedback-system",
"modes": [
{
"label": {
"zh": "短等待",
"en": "Short wait"
},
"time": "<1s",
"kind": "spinner",
"desc": {
"zh": "按钮内小 spinner",
"en": "Small spinner in button"
}
},
{
"label": {
"zh": "中等待",
"en": "Medium wait"
},
"time": "1-2s",
"kind": "progress",
"desc": {
"zh": "显示进度或步骤",
"en": "Show progress or steps"
}
},
{
"label": {
"zh": "AI 等待",
"en": "AI wait"
},
"time": "1-3s",
"kind": "thinking",
"desc": {
"zh": "思考提示，不伪装成进度",
"en": "Thinking signal, not fake progress"
}
},
{
"label": {
"zh": "长等待",
"en": "Long wait"
},
"time": ">3s",
"kind": "skeleton",
"desc": {
"zh": "骨架 + 说明 + 重试",
"en": "Skeleton, copy, retry"
}
}
]
},
"pattern": null
},
{
"id": "scroll-animation",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "滚动动画",
"en": "Scroll Animation"
},
"aliases": {
"zh": [
"滚动动画",
"滚动触发",
"scroll animation"
],
"en": [
"Scroll animation",
"scroll-triggered motion",
"scroll reveal"
]
},
"description": {
"zh": "随着滚动位置触发的界面变化，常用于区块进入视口、目录高亮、阅读进度和轻量视差。",
"en": "Interface changes triggered by scroll position, such as section reveal, table-of-contents highlight, reading progress, and subtle parallax."
},
"prompt": {
"zh": [
"设计滚动触发动画：区块进入视口时只淡入上移一次，同时更新目录高亮和阅读进度；快速滚动时避免连续复杂动画。"
],
"en": [
"Design scroll-triggered motion: reveal sections once with fade and slight upward travel, update toc highlight and reading progress, and avoid complex repeated animation during fast scrolling."
]
},
"tip": {
"zh": "滚动动画讲的是“滚到这里发生什么”，滚动进度只是其中一种表现。",
"en": "Scroll animation is about what happens at this scroll position; scroll progress is only one expression of it."
},
"preview": {
"kind": "scroll-triggered-motion"
},
"pattern": null
},
{
"id": "micro-interaction",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "微交互",
"en": "Micro-interaction"
},
"aliases": {
"zh": [
"微交互",
"小反馈",
"点击反馈"
],
"en": [
"Micro-interaction",
"microinteraction",
"small feedback"
]
},
"description": {
"zh": "微交互是操作之后的一点小反馈，比如复制后变成已复制、保存后出现确认。它让用户知道刚才的动作成功了。",
"en": "A micro-interaction is a tiny response after an action, such as changing Copy to Copied or confirming a save. It tells users their action worked."
},
"prompt": {
"zh": [
"给复制按钮加入微交互：点击后按钮轻微缩小 180ms，图标变成对勾，文案显示“已复制”1.5 秒，然后恢复。"
],
"en": [
"Add a micro-interaction to the copy button: on click, slightly scale the button for 180ms, switch the icon to a checkmark, show “Copied” for 1.5 seconds, then reset."
]
},
"tip": {
"zh": "微交互的重点是确认操作已发生，不是做复杂动画。",
"en": "Micro-interactions confirm an action happened; they are not complex animations."
},
"preview": {
"kind": "micro-interaction-feedback",
"actions": [
{
"label": {
"zh": "复制",
"en": "Copy"
},
"before": {
"zh": "复制链接",
"en": "Copy link"
},
"after": {
"zh": "已复制",
"en": "Copied"
}
},
{
"label": {
"zh": "保存",
"en": "Save"
},
"before": {
"zh": "保存草稿",
"en": "Save draft"
},
"after": {
"zh": "已保存",
"en": "Saved"
}
},
{
"label": {
"zh": "点赞",
"en": "Like"
},
"before": {
"zh": "赞一下",
"en": "Like it"
},
"after": {
"zh": "已点赞",
"en": "Liked"
}
}
]
},
"pattern": null
},
{
"id": "reduced-motion",
"category": "accessibility",
"category_label": {
"zh": "可访问性",
"en": "Accessibility"
},
"title": {
"zh": "减少动效",
"en": "Reduced Motion"
},
"aliases": {
"zh": [
"减少动效",
"降低动画",
"prefers-reduced-motion"
],
"en": [
"Reduced motion",
"prefers-reduced-motion",
"motion accessibility"
]
},
"description": {
"zh": "当用户开启减少动态效果时，界面仍然要有反馈，但要减少大幅位移、闪烁和循环动画，改用更稳定的状态变化。",
"en": "When users prefer reduced motion, the interface should still provide feedback while reducing large movement, flashing, and looping animation in favor of stable state changes."
},
"prompt": {
"zh": [
"为所有动画加入 prefers-reduced-motion：关闭大幅位移、闪烁和循环，只保留必要的透明度变化或即时状态切换。"
],
"en": [
"Add prefers-reduced-motion handling to all animations: disable large movement, flashing, and loops, keeping only necessary opacity changes or instant state switches."
]
},
"tip": {
"zh": "减少动效不是删除体验，而是给不适合强动效的用户一条稳定路径。",
"en": "Reduced motion does not remove experience; it gives sensitive users a stable path."
},
"preview": {
"kind": "reduced-motion-mode",
"modes": [
{
"label": {
"zh": "标准动效",
"en": "Standard motion"
},
"desc": {
"zh": "位移、缩放、循环都可能出现",
"en": "Movement, scale, and loops may appear"
}
},
{
"label": {
"zh": "减少动效",
"en": "Reduced motion"
},
"desc": {
"zh": "保留状态变化，减少大幅移动和循环",
"en": "Keep state changes, reduce large movement and loops"
}
}
]
},
"pattern": null
},
{
"id": "focus",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "焦点",
"en": "Focus"
},
"aliases": {
"zh": [
"焦点",
"聚焦状态",
"键盘焦点",
"当前活动项"
],
"en": [
"Focus",
"focus",
"focused state",
"active input"
]
},
"description": {
"zh": "键盘或鼠标当前选中的交互元素状态，用来告诉用户接下来输入或按键会作用在哪里。",
"en": "The \"currently active\" state for an input or button — that blue glow when a field is clicked."
},
"prompt": {
"zh": [
"为输入框和按钮设计清晰的 focus 状态，使用可见描边，并保证键盘 Tab 导航顺序正确。"
],
"en": [
"Turn the input border purple when focused."
]
},
"tip": {
"zh": "不要移除焦点环；可以重新设计颜色和样式，但必须让键盘用户看得见当前位置。",
"en": "For accessibility, never remove the focus ring — at most, restyle its color."
},
"preview": {
"kind": "focus-states",
"fields": [
{
"label": {
"zh": "用户名",
"en": "Username"
},
"focused": true,
"ring": "blue"
},
{
"label": {
"zh": "邮箱",
"en": "Email"
},
"focused": false
},
{
"label": {
"zh": "密码",
"en": "Password"
},
"focused": false
}
],
"description": {
"zh": "键盘导航时的焦点指示",
"en": "Focus indicator for keyboard navigation"
}
},
"pattern": null
},
{
"id": "drag",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "拖拽",
"en": "Drag & Drop"
},
"aliases": {
"zh": [
"拖拽",
"拖放",
"拖动排序",
"DnD"
],
"en": [
"Drag & Drop",
"drag and drop",
"DnD",
"reorder"
]
},
"description": {
"zh": "用户按住元素并移动到新位置的交互，常用于任务看板、排序列表、上传区域和布局编辑。",
"en": "Grab and move an element with the mouse — used in task boards, image uploads, and list reordering."
},
"prompt": {
"zh": [
"让用户可以在看板列之间拖拽任务卡，拖动时显示占位位置，放下后更新状态；同时提供键盘排序、取消拖拽和保存失败回滚。"
],
"en": [
"Let users drag and drop task cards between columns, with placeholders, keyboard reordering, cancel, and rollback on save failure."
]
},
"tip": {
"zh": "拖拽实现复杂，通常应使用 dnd-kit、SortableJS 等成熟库，并补充键盘替代操作。",
"en": "Implementation is non-trivial. Ask the AI to suggest a library like dnd-kit or SortableJS."
},
"preview": {
"kind": "drag-drop",
"items": [
{
"label": {
"zh": "任务 1",
"en": "Task 1"
},
"draggable": true,
"position": 1
},
{
"label": {
"zh": "任务 2",
"en": "Task 2"
},
"draggable": true,
"position": 2
},
{
"label": {
"zh": "任务 3",
"en": "Task 3"
},
"draggable": true,
"position": 3
}
],
"dropZone": {
"zh": "拖到这里",
"en": "Drop Here"
}
},
"pattern": null
},
{
"id": "swipe",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "滑动",
"en": "Swipe"
},
"aliases": {
"zh": [
"滑动",
"滑动手势",
"左右滑动",
"swipe"
],
"en": [
"Swipe",
"swipe",
"flick",
"horizontal slide"
]
},
"description": {
"zh": "移动端用手指横向或纵向滑过屏幕触发切换、翻页、删除或返回等操作。",
"en": "Sliding a finger horizontally on mobile. Used for carousels, image galleries, and swipe-to-delete."
},
"prompt": {
"zh": [
"让轮播支持左右滑动切换，同时保留桌面端箭头按钮、分页点和键盘左右键；滑动失败或到边界时给出清晰反馈。"
],
"en": [
"Allow the carousel to be swiped between slides while keeping arrows, dots, keyboard navigation, and boundary feedback."
]
},
"tip": {
"zh": "手势不应该是唯一入口；桌面端和无障碍用户也需要按钮或键盘操作。",
"en": "A mobile-only gesture. On desktop, provide an alternative like arrow buttons."
},
"preview": {
"kind": "swipe-gestures",
"actions": [
{
"direction": "left",
"icon": "trash",
"label": {
"zh": "删除",
"en": "Delete"
},
"color": "red"
},
{
"direction": "right",
"icon": "archive",
"label": {
"zh": "归档",
"en": "Archive"
},
"color": "blue"
}
],
"item": {
"title": {
"zh": "向左或向右滑动",
"en": "Swipe left or right"
}
}
},
"pattern": null
},
{
"id": "flexbox",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "弹性布局",
"en": "Flexbox"
},
"aliases": {
"zh": [
"弹性布局",
"Flexbox",
"flex 布局",
"display: flex"
],
"en": [
"Flexbox",
"flexbox",
"flex",
"display:flex"
]
},
"description": {
"zh": "沿横向或纵向排列元素的 CSS 布局方式，适合按钮组、工具栏、导航、卡片内部对齐等一维布局。",
"en": "A CSS layout that arranges elements in a flexible row or column. The most commonly used layout technique."
},
"prompt": {
"zh": [
"用 flex 布局排列按钮组，让按钮横向排列、垂直居中，并在移动端自动换行。"
],
"en": [
"Lay out the buttons in a horizontal row, centered."
]
},
"tip": {
"zh": "Flexbox 适合处理一行或一列里的对齐；如果同时要控制行和列，通常应该用 Grid。",
"en": "Say things like \"in a row\", \"centered\", \"evenly spaced\", or \"right-aligned\" and the AI will reach for flexbox."
},
"preview": {
"kind": "flexbox-layout",
"examples": [
{
"name": {
"zh": "水平排列",
"en": "Horizontal"
},
"direction": "row",
"items": 3
},
{
"name": {
"zh": "垂直排列",
"en": "Vertical"
},
"direction": "column",
"items": 3
},
{
"name": {
"zh": "居中对齐",
"en": "Center"
},
"justify": "center",
"align": "center",
"items": 1
},
{
"name": {
"zh": "两端对齐",
"en": "Space Between"
},
"justify": "space-between",
"items": 3
}
]
},
"pattern": null
},
{
"id": "grid",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "网格布局",
"en": "CSS Grid"
},
"aliases": {
"zh": [
"网格布局",
"CSS Grid",
"栅格布局",
"二维网格"
],
"en": [
"CSS Grid",
"grid layout",
"tiles"
]
},
"description": {
"zh": "用行和列组织页面区域或卡片集合的 CSS 布局方式，适合控制整体结构和多列内容。",
"en": "A CSS layout that places elements on a row-and-column grid. Great for 2D layouts and evenly spaced card grids."
},
"prompt": {
"zh": [
"把卡片列表做成桌面 3 列、平板 2 列、移动端 1 列的响应式网格，并保持统一间距。"
],
"en": [
"Lay the cards out in a 3-column grid, collapsing to 1 column on mobile."
]
},
"tip": {
"zh": "Grid 适合明确列数、区域和整体节奏；Flexbox 更适合单行排列和局部对齐。",
"en": "Mention \"N columns\" and the AI will reach for CSS Grid. You can let it decide between Grid and Flexbox."
},
"preview": {
"kind": "grid-layout",
"examples": [
{
"name": {
"zh": "2 列网格",
"en": "2 Columns"
},
"columns": 2,
"gap": "1rem"
},
{
"name": {
"zh": "3 列网格",
"en": "3 Columns"
},
"columns": 3,
"gap": "1rem"
},
{
"name": {
"zh": "自适应网格",
"en": "Auto Grid"
},
"columns": "auto-fit",
"minWidth": "200px"
}
]
},
"pattern": null
},
{
"id": "responsive",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "响应式设计",
"en": "Responsive Design"
},
"aliases": {
"zh": [
"响应式设计",
"响应式",
"多端适配",
"移动端适配"
],
"en": [
"Responsive Design",
"responsive",
"responsive design",
"RWD",
"mobile-friendly"
]
},
"description": {
"zh": "让同一套内容在不同屏幕上自动重排：手机单列阅读，平板分组展示，桌面利用横向空间，同时保证文字、按钮和卡片不溢出。",
"en": "Makes the same content reflow across screen sizes: one column on mobile, grouped layout on tablet, and wider composition on desktop while keeping text, buttons, and cards from overflowing."
},
"prompt": {
"zh": [
"让页面响应式适配：手机端单列且按钮更容易点击，平板端两列分组，桌面端左右布局；明确内容顺序、间距和不允许横向滚动。"
],
"en": [
"Make the page responsive: one column with larger tap targets on mobile, two grouped columns on tablet, and split layout on desktop; define content order, spacing, and no horizontal scrolling."
]
},
"tip": {
"zh": "不要只说“做响应式”。要说明小屏怎么排、中屏怎么分组、大屏怎么利用空间，以及哪些内容不能被隐藏。",
"en": "Do not only say “make it responsive.” Explain mobile layout, tablet grouping, desktop space usage, and what content must not be hidden."
},
"preview": {
"kind": "responsive-design",
"modes": [
{
"key": "mobile",
"label": {
"zh": "手机",
"en": "Mobile"
},
"width": "390px",
"layout": {
"zh": "单列阅读",
"en": "One column"
}
},
{
"key": "tablet",
"label": {
"zh": "平板",
"en": "Tablet"
},
"width": "768px",
"layout": {
"zh": "两列分组",
"en": "Two groups"
}
},
{
"key": "desktop",
"label": {
"zh": "桌面",
"en": "Desktop"
},
"width": "1280px",
"layout": {
"zh": "左右布局",
"en": "Split layout"
}
}
]
},
"pattern": null
},
{
"id": "breakpoint",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "断点",
"en": "Breakpoint"
},
"aliases": {
"zh": [
"断点",
"响应式断点",
"媒体查询",
"屏幕阈值"
],
"en": [
"Breakpoint",
"breakpoint",
"media query",
"screen threshold"
]
},
"description": {
"zh": "布局在某个屏幕宽度开始变化的阈值，例如从多列切换为单列、从顶部导航切换为汉堡菜单。",
"en": "The screen-width thresholds where a responsive layout changes — e.g., 768px (tablet), 1024px (desktop)."
},
"prompt": {
"zh": [
"在 768px 以下切换为移动端布局，卡片改为单列，导航改为可展开菜单。"
],
"en": [
"Switch to the mobile layout below 768px."
]
},
"tip": {
"zh": "断点应该跟内容实际拥挤程度有关，不必机械套固定尺寸；发现溢出时就该提前重排。",
"en": "Common thresholds: ≤767px = mobile, 768–1023px = tablet, ≥1024px = desktop."
},
"preview": {
"kind": "breakpoint-system",
"points": [
{
"name": "xs",
"width": "0px",
"description": {
"zh": "超小屏幕",
"en": "Extra Small"
}
},
{
"name": "sm",
"width": "640px",
"description": {
"zh": "小屏幕",
"en": "Small"
}
},
{
"name": "md",
"width": "768px",
"description": {
"zh": "中等屏幕",
"en": "Medium"
}
},
{
"name": "lg",
"width": "1024px",
"description": {
"zh": "大屏幕",
"en": "Large"
}
},
{
"name": "xl",
"width": "1280px",
"description": {
"zh": "超大屏幕",
"en": "Extra Large"
}
},
{
"name": "2xl",
"width": "1536px",
"description": {
"zh": "超超大屏幕",
"en": "2X Large"
}
}
]
},
"pattern": null
},
{
"id": "margin",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "外边距",
"en": "Margin"
},
"aliases": {
"zh": [
"外边距",
"外间距",
"元素外侧间距"
],
"en": [
"Margin",
"margin",
"outer spacing"
]
},
"description": {
"zh": "元素外部与其他元素之间的空间，用来控制区块之间、卡片之间或段落之间的距离。",
"en": "The space outside an element — used to create room between elements."
},
"prompt": {
"zh": [
"把页面区块之间的外边距设为 72px，移动端缩小到 40px，避免内容贴得太近。"
],
"en": [
"Set the margin between sections to 80px."
]
},
"tip": {
"zh": "外边距影响元素之间的关系；如果要让卡片内部更松，应该调 padding。",
"en": "Margin is outside; padding is inside. Using both terms correctly makes your layout instructions precise."
},
"preview": {
"kind": "spacing-margin",
"examples": [
{
"label": {
"zh": "无边距",
"en": "No Margin"
},
"value": "0"
},
{
"label": {
"zh": "小边距",
"en": "Small"
},
"value": "0.5rem"
},
{
"label": {
"zh": "中边距",
"en": "Medium"
},
"value": "1rem"
},
{
"label": {
"zh": "大边距",
"en": "Large"
},
"value": "2rem"
}
],
"directions": [
"top",
"right",
"bottom",
"left",
"all"
]
},
"pattern": null
},
{
"id": "padding",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "内边距",
"en": "Padding"
},
"aliases": {
"zh": [
"内边距",
"内间距",
"内容留白",
"padding"
],
"en": [
"Padding",
"padding",
"inner spacing"
]
},
"description": {
"zh": "元素边框与内部内容之间的空间，用来控制按钮、卡片、面板和输入框的呼吸感。",
"en": "The space inside an element — between the border and the content (text or image)."
},
"prompt": {
"zh": [
"调整卡片内边距：桌面端 24px，移动端 16px，并确保标题和按钮不会挤在一起。"
],
"en": [
"Set the button padding to 12px vertical, 24px horizontal."
]
},
"tip": {
"zh": "内容显得拥挤通常是 padding 不够；页面显得散通常是 margin 或 gap 太大。",
"en": "\"Feels cramped\" = not enough padding; \"feels too far apart\" = too much margin. Whitespace tuning shapes design quality."
},
"preview": {
"kind": "spacing-padding",
"examples": [
{
"label": {
"zh": "无内边距",
"en": "No Padding"
},
"value": "0"
},
{
"label": {
"zh": "小内边距",
"en": "Small"
},
"value": "0.5rem"
},
{
"label": {
"zh": "中内边距",
"en": "Medium"
},
"value": "1rem"
},
{
"label": {
"zh": "大内边距",
"en": "Large"
},
"value": "2rem"
}
],
"preview": {
"text": {
"zh": "内容区域",
"en": "Content Area"
}
}
},
"pattern": null
},
{
"id": "gap",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "间距",
"en": "Gap"
},
"aliases": {
"zh": [
"间距",
"元素间距",
"网格间距",
"gap"
],
"en": [
"Gap",
"gap",
"spacing",
"grid gap"
]
},
"description": {
"zh": "Flex 或 Grid 子元素之间的统一间距，比给每个元素单独写 margin 更稳定。",
"en": "A Flex/Grid property that sets uniform spacing between child elements — cleaner than using margins."
},
"prompt": {
"zh": [
"为卡片网格设置 24px gap，移动端降为 16px，并避免最后一列出现额外空白。"
],
"en": [
"Set a 24px gap between items in the card grid."
]
},
"tip": {
"zh": "列表、网格和按钮组优先用 gap 控制间距，能减少首尾元素多余边距问题。",
"en": "Margins can leave awkward space at the first or last item; gap only spaces between items, which is much cleaner."
},
"preview": {
"kind": "spacing-gap",
"examples": [
{
"label": {
"zh": "无间距",
"en": "No Gap"
},
"value": "0",
"items": 3
},
{
"label": {
"zh": "小间距",
"en": "Small Gap"
},
"value": "0.5rem",
"items": 3
},
{
"label": {
"zh": "中间距",
"en": "Medium Gap"
},
"value": "1rem",
"items": 3
},
{
"label": {
"zh": "大间距",
"en": "Large Gap"
},
"value": "2rem",
"items": 3
}
]
},
"pattern": null
},
{
"id": "z-index",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "z-index 层级",
"en": "z-index"
},
"aliases": {
"zh": [
"z-index 层级",
"堆叠顺序",
"层级顺序",
"浮层层级"
],
"en": [
"z-index",
"stacking order",
"layer order"
]
},
"description": {
"zh": "控制重叠元素谁显示在上方，常用于导航、下拉菜单、弹窗、遮罩和 Toast。",
"en": "A number that controls stacking order. Higher values appear in front. Essential for modals and dropdowns."
},
"prompt": {
"zh": [
"整理浮层 z-index：导航低于弹窗，弹窗高于遮罩，Toast 保持在最上层且不遮挡关键操作。"
],
"en": [
"Put the modal on top of everything (high z-index)."
]
},
"tip": {
"zh": "不要用 9999 硬顶所有问题；更好的方式是建立清晰的层级表。",
"en": "Don't pile on arbitrary numbers like 9999 — stick to tidy tiers (10, 20, 100) for maintainability."
},
"preview": {
"kind": "z-index-layers",
"layers": [
{
"name": {
"zh": "背景",
"en": "Background"
},
"z": 0,
"color": "#f1f5f9"
},
{
"name": {
"zh": "内容",
"en": "Content"
},
"z": 10,
"color": "#e2e8f0"
},
{
"name": {
"zh": "浮层",
"en": "Overlay"
},
"z": 50,
"color": "#cbd5e1"
},
{
"name": {
"zh": "模态框",
"en": "Modal"
},
"z": 100,
"color": "#94a3b8"
},
{
"name": {
"zh": "提示",
"en": "Tooltip"
},
"z": 9999,
"color": "#64748b"
}
]
},
"pattern": null
},
{
"id": "font-family",
"category": "typo",
"category_label": {
"zh": "文本与排版",
"en": "Typography"
},
"title": {
"zh": "字体族",
"en": "Font / Font Family"
},
"aliases": {
"zh": [
"字体族",
"字体",
"无衬线字体",
"衬线字体",
"等宽字体"
],
"en": [
"Font / Font Family",
"font",
"typeface",
"sans-serif",
"serif",
"monospace"
]
},
"description": {
"zh": "界面使用的字体体系，决定文字气质、可读性和品牌感，通常区分标题、正文和代码/数字字体。",
"en": "The typeface used for text. Sans-serif (UI and headings), serif (body and elegance), monospace (code) are the main families."
},
"prompt": {
"zh": [
"为页面设定字体系统：正文使用清晰的无衬线字体，标题使用更有识别度的字重，代码使用等宽字体。"
],
"en": [
"Use Noto Sans for the body, and a heavier weight for headings."
]
},
"tip": {
"zh": "字体选择要服务内容气质和可读性，不要为了风格牺牲中文显示质量。",
"en": "For system and web, Inter, Roboto, and Noto Sans are solid free picks from Google Fonts."
},
"preview": {
"kind": "font-family-showcase",
"fonts": [
{
"name": "Sans-serif",
"family": "system-ui, sans-serif",
"sample": {
"zh": "现代无衬线字体",
"en": "Modern sans-serif"
}
},
{
"name": "Serif",
"family": "Georgia, serif",
"sample": {
"zh": "经典衬线字体",
"en": "Classic serif"
}
},
{
"name": "Monospace",
"family": "Monaco, monospace",
"sample": {
"zh": "等宽代码字体",
"en": "Monospace code"
}
}
]
},
"pattern": null
},
{
"id": "font-size",
"category": "typo",
"category_label": {
"zh": "文本与排版",
"en": "Typography"
},
"title": {
"zh": "字号",
"en": "Font Size"
},
"aliases": {
"zh": [
"字号",
"字体大小",
"文本大小",
"文字尺寸"
],
"en": [
"Font Size",
"font size",
"text size"
]
},
"description": {
"zh": "文字显示大小，直接影响信息层级、阅读舒适度和移动端可读性。",
"en": "Text size — specified in px, rem (multiples of the base size), or clamp() for fluid sizing."
},
"prompt": {
"zh": [
"建立字号层级：正文 16px，卡片标题 18px，页面标题 32px，并在移动端适当收紧。"
],
"en": [
"Set the heading's font size to 2rem."
]
},
"tip": {
"zh": "不要用视口宽度无限缩放字号；标题和正文应该有稳定层级，长词也要能放进容器。",
"en": "Body text should be 16px, 14px at minimum. Anything below 13px gets hard to read on mobile."
},
"preview": {
"kind": "font-size-scale",
"sizes": [
{
"name": "xs",
"value": "0.75rem",
"sample": {
"zh": "超小文本",
"en": "Extra small"
}
},
{
"name": "sm",
"value": "0.875rem",
"sample": {
"zh": "小号文本",
"en": "Small text"
}
},
{
"name": "base",
"value": "1rem",
"sample": {
"zh": "正文文本",
"en": "Base text"
}
},
{
"name": "lg",
"value": "1.125rem",
"sample": {
"zh": "大号文本",
"en": "Large text"
}
},
{
"name": "xl",
"value": "1.25rem",
"sample": {
"zh": "超大文本",
"en": "Extra large"
}
},
{
"name": "2xl",
"value": "1.5rem",
"sample": {
"zh": "标题文本",
"en": "Heading text"
}
}
]
},
"pattern": null
},
{
"id": "font-weight",
"category": "typo",
"category_label": {
"zh": "文本与排版",
"en": "Typography"
},
"title": {
"zh": "字重",
"en": "Font Weight"
},
"aliases": {
"zh": [
"字重",
"字体粗细",
"粗体",
"文字重量"
],
"en": [
"Font Weight",
"font weight",
"bold",
"weight"
]
},
"description": {
"zh": "文字笔画的粗细，用来区分标题、强调、正文和辅助信息。",
"en": "Text thickness. 400 is regular, 700 is bold. Ranges 100–900 in 9 steps (font permitting)."
},
"prompt": {
"zh": [
"设置清晰字重层级：正文 400，强调 600，标题 700，并避免整页都使用粗体。"
],
"en": [
"Set the heading to font-weight: 800 (extra bold)."
]
},
"tip": {
"zh": "字重是建立层级的工具，不是越粗越重要；粗体太多会让页面失去重点。",
"en": "Numbers are most precise: light=300, regular=400, medium=500, bold=700, black=900."
},
"preview": {
"kind": "font-weight-variants",
"weights": [
{
"name": "light",
"value": "300",
"sample": {
"zh": "细体文本",
"en": "Light weight"
}
},
{
"name": "normal",
"value": "400",
"sample": {
"zh": "常规文本",
"en": "Normal weight"
}
},
{
"name": "medium",
"value": "500",
"sample": {
"zh": "中等文本",
"en": "Medium weight"
}
},
{
"name": "semibold",
"value": "600",
"sample": {
"zh": "半粗体文本",
"en": "Semibold weight"
}
},
{
"name": "bold",
"value": "700",
"sample": {
"zh": "粗体文本",
"en": "Bold weight"
}
}
]
},
"pattern": null
},
{
"id": "line-height",
"category": "typo",
"category_label": {
"zh": "文本与排版",
"en": "Typography"
},
"title": {
"zh": "行高",
"en": "Line Height"
},
"aliases": {
"zh": [
"行高",
"行距",
"文本行距"
],
"en": [
"Line Height",
"line height",
"line spacing",
"leading"
]
},
"description": {
"zh": "多行文字每一行之间的垂直距离，决定正文是否容易阅读、卡片文本是否拥挤。",
"en": "The spacing between lines of text. 1.5–1.8 is widely considered most readable. 1 is cramped; 2 feels too loose."
},
"prompt": {
"zh": [
"把正文行高设为 1.7，卡片摘要设为 1.55，让长文本更容易阅读且不显得松散。"
],
"en": [
"Set body line-height to 1.8 for readability."
]
},
"tip": {
"zh": "中文长文通常需要比英文略大的行高；标题行高可以紧一些，正文不能太挤。",
"en": "Japanese text reads better with slightly more leading than English — 1.7–1.9 is a good range."
},
"preview": {
"kind": "line-height-demo",
"examples": [
{
"name": "tight",
"value": "1.25",
"sample": {
"zh": "紧凑行高适合标题。\n减少垂直空间。",
"en": "Tight for headings.\nReduced vertical space."
}
},
{
"name": "normal",
"value": "1.5",
"sample": {
"zh": "标准行高适合正文。\n良好的可读性。",
"en": "Normal for body text.\nGood readability."
}
},
{
"name": "relaxed",
"value": "1.75",
"sample": {
"zh": "宽松行高适合长文。\n增加呼吸感。",
"en": "Relaxed for long text.\nMore breathing room."
}
}
]
},
"pattern": null
},
{
"id": "letter-spacing",
"category": "typo",
"category_label": {
"zh": "文本与排版",
"en": "Typography"
},
"title": {
"zh": "字间距",
"en": "Letter Spacing"
},
"aliases": {
"zh": [
"字间距",
"字符间距",
"字距",
"letter spacing"
],
"en": [
"Letter Spacing",
"letter spacing",
"tracking"
]
},
"description": {
"zh": "字符之间的水平间距，常用于大标题、按钮、标签或全大写英文的细节调节。",
"en": "Spacing between individual characters. Headings often get a touch more; body text stays at the default."
},
"prompt": {
"zh": [
"微调标题字间距，让英文大写标签稍微拉开，正文保持默认字距以保证可读性。"
],
"en": [
"Set heading letter-spacing to 0.05em to loosen it up a bit."
]
},
"tip": {
"zh": "正文通常不要随意加字间距；中文界面里字距过大会显得松散和不专业。",
"en": "The em unit scales with font size. 0.05em loosens a bit; -0.02em tightens a bit."
},
"preview": {
"kind": "letter-spacing-demo",
"examples": [
{
"name": "tighter",
"value": "-0.05em",
"sample": {
"zh": "紧密字距",
"en": "Tighter spacing"
}
},
{
"name": "normal",
"value": "0",
"sample": {
"zh": "标准字距",
"en": "Normal spacing"
}
},
{
"name": "wide",
"value": "0.05em",
"sample": {
"zh": "宽松字距",
"en": "Wide spacing"
}
},
{
"name": "wider",
"value": "0.1em",
"sample": {
"zh": "超宽字距",
"en": "Wider spacing"
}
}
]
},
"pattern": null
},
{
"id": "text-align",
"category": "typo",
"category_label": {
"zh": "文本与排版",
"en": "Typography"
},
"title": {
"zh": "文本对齐",
"en": "Text Align"
},
"aliases": {
"zh": [
"文本对齐",
"对齐",
"中心",
"左",
"右"
],
"en": [
"Text Align",
"text align",
"alignment",
"center",
"left",
"right",
"justify"
]
},
"description": {
"zh": "控制文字在容器内的水平对齐方式，例如左对齐、居中、右对齐或两端对齐。",
"en": "Horizontal text alignment — left, center, right, or justify."
},
"prompt": {
"zh": [
"将首屏标题和副标题居中对齐，正文列表保持左对齐，保证阅读节奏稳定。"
],
"en": [
"Center-align the text in the hero section."
]
},
"tip": {
"zh": "长正文优先左对齐；居中更适合短标题、首屏标语和少量说明文字。",
"en": "Left-align body text for readability. Reserve center alignment for heroes and short headings."
},
"preview": {
"kind": "text-align-options",
"alignments": [
{
"value": "left",
"label": {
"zh": "左对齐",
"en": "Left"
},
"sample": {
"zh": "这是左对齐的文本示例",
"en": "Left aligned text sample"
}
},
{
"value": "center",
"label": {
"zh": "居中对齐",
"en": "Center"
},
"sample": {
"zh": "这是居中对齐的文本示例",
"en": "Center aligned text sample"
}
},
{
"value": "right",
"label": {
"zh": "右对齐",
"en": "Right"
},
"sample": {
"zh": "这是右对齐的文本示例",
"en": "Right aligned text sample"
}
},
{
"value": "justify",
"label": {
"zh": "两端对齐",
"en": "Justify"
},
"sample": {
"zh": "这是两端对齐的文本示例，会填满整行",
"en": "Justified text fills the entire line width"
}
}
]
},
"pattern": null
},
{
"id": "heading",
"category": "typo",
"category_label": {
"zh": "文本与排版",
"en": "Typography"
},
"title": {
"zh": "标题层级",
"en": "Heading (h1–h6)"
},
"aliases": {
"zh": [
"标题层级",
"标题结构",
"h1",
"h2",
"h3"
],
"en": [
"Heading (h1–h6)",
"heading",
"h1",
"h2",
"h3",
"title"
]
},
"description": {
"zh": "页面标题和小标题的结构层级，用来组织内容、辅助扫描，也会影响语义和 SEO。",
"en": "HTML elements that mark titles and subheadings. h1 is the largest and most important, h6 the smallest. Affects SEO."
},
"prompt": {
"zh": [
"梳理页面标题层级：每页一个 h1，主要区块使用 h2，卡片内部标题使用 h3。"
],
"en": [
"Structure the page with h2 for section titles and h3 for subheadings."
]
},
"tip": {
"zh": "标题层级不要只看字号，还要保持语义顺序；不要为了视觉效果跳过 h2 直接用 h4。",
"en": "Use only one h1 per page. Follow h2 → h3 → h4 in order — don't skip levels."
},
"preview": {
"kind": "heading-hierarchy",
"headings": [
{
"level": "h1",
"size": "2.25rem",
"sample": {
"zh": "一级标题",
"en": "Heading 1"
}
},
{
"level": "h2",
"size": "1.875rem",
"sample": {
"zh": "二级标题",
"en": "Heading 2"
}
},
{
"level": "h3",
"size": "1.5rem",
"sample": {
"zh": "三级标题",
"en": "Heading 3"
}
},
{
"level": "h4",
"size": "1.25rem",
"sample": {
"zh": "四级标题",
"en": "Heading 4"
}
},
{
"level": "h5",
"size": "1.125rem",
"sample": {
"zh": "五级标题",
"en": "Heading 5"
}
},
{
"level": "h6",
"size": "1rem",
"sample": {
"zh": "六级标题",
"en": "Heading 6"
}
}
]
},
"pattern": null
},
{
"id": "truncate",
"category": "typo",
"category_label": {
"zh": "文本与排版",
"en": "Typography"
},
"title": {
"zh": "文本截断",
"en": "Text Truncation / Ellipsis"
},
"aliases": {
"zh": [
"文本截断",
"省略号",
"多行截断",
"line clamp"
],
"en": [
"Text Truncation / Ellipsis",
"truncate",
"ellipsis",
"line clamp"
]
},
"description": {
"zh": "当文本过长时限制显示行数，并用省略号避免撑坏卡片、按钮或列表布局。",
"en": "Truncates long text with an ellipsis (\"…\") to keep cards and list items from overflowing."
},
"prompt": {
"zh": [
"把卡片摘要限制为 2 行，超出后显示省略号，并保证不同长度内容不会让卡片布局跳动。"
],
"en": [
"Clamp the card description to 2 lines with an ellipsis at the end."
]
},
"tip": {
"zh": "截断适合列表预览；详情页和重要说明不应该隐藏关键信息。",
"en": "Single-line truncation is easy in CSS; multi-line needs -webkit-line-clamp. \"Clamp to N lines\" works as a prompt."
},
"preview": {
"kind": "text-truncate",
"examples": [
{
"type": "single",
"text": {
"zh": "这是一段很长的文本，在单行显示时会被截断并显示省略号",
"en": "This is a very long text that will be truncated with ellipsis when displayed on a single line"
}
},
{
"type": "multi",
"lines": 2,
"text": {
"zh": "这是一段很长的文本，在多行显示时超出指定行数会被截断。可以设置显示的最大行数。",
"en": "This is a very long text that will be truncated after a specified number of lines. You can set the maximum number of lines to display."
}
}
]
},
"pattern": null
},
{
"id": "bgcolor",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Style"
},
"title": {
"zh": "背景色",
"en": "Background Color"
},
"aliases": {
"zh": [
"背景色",
"背景颜色",
"底色",
"surface color"
],
"en": [
"Background Color",
"background color",
"bg color",
"background"
]
},
"description": {
"zh": "界面区域或组件背后的底色，用来区分层级、承载内容，并影响整体明暗和品牌气质。",
"en": "The fill color behind an element. Alternating backgrounds between sections adds visual rhythm."
},
"prompt": {
"zh": [
"为页面设置克制的背景色系统：主背景、卡片背景、悬浮层背景和弱提示背景要有清晰层级。"
],
"en": [
"Give even-numbered sections a light gray background to alternate with the white ones."
]
},
"tip": {
"zh": "背景色不要只追求好看，要保证文字对比度、状态可识别，并避免大面积高饱和色。",
"en": "Color formats: name (red), HEX (#ff0000), RGB, HSL. HEX is the most common."
},
"preview": {
"kind": "background-colors",
"colors": [
{
"name": {
"zh": "主色",
"en": "Primary"
},
"value": "#3b82f6"
},
{
"name": {
"zh": "成功",
"en": "Success"
},
"value": "#10b981"
},
{
"name": {
"zh": "警告",
"en": "Warning"
},
"value": "#f59e0b"
},
{
"name": {
"zh": "危险",
"en": "Danger"
},
"value": "#ef4444"
},
{
"name": {
"zh": "中性",
"en": "Neutral"
},
"value": "#6b7280"
}
]
},
"pattern": null
},
{
"id": "gradient",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Style"
},
"title": {
"zh": "渐变",
"en": "Gradient"
},
"aliases": {
"zh": [
"渐变",
"线性渐变",
"径向渐变",
"渐变背景"
],
"en": [
"Gradient",
"gradient",
"linear gradient",
"radial gradient"
]
},
"description": {
"zh": "由两种或多种颜色平滑过渡形成的强调面。好的渐变要能看出方向、光源或颜色层次，同时保持克制。",
"en": "A surface that blends two or more colors. A good gradient clearly shows direction, light source, or color depth while staying restrained."
},
"prompt": {
"zh": [
"使用低饱和渐变作为小面积强调：线性渐变用于方向感，径向渐变用于光源焦点，三色渐变用于品牌氛围；避免大面积高饱和紫粉发光。"
],
"en": [
"Use soft gradients as small accents: linear gradients for direction, radial gradients for light focus, and three-color gradients for brand atmosphere; avoid large saturated purple-pink glow."
]
},
"tip": {
"zh": "渐变要看得出“从哪到哪”。如果几乎看不出来，就只是脏白背景；如果太亮，又会有 AI 模板感。",
"en": "A gradient should show where color starts and ends. If it is invisible, it becomes muddy white; if too bright, it feels templated."
},
"preview": {
"kind": "gradient-patterns",
"gradients": [
{
"name": {
"zh": "线性渐变",
"en": "Linear"
},
"type": "linear",
"colors": [
"#dbeafe",
"#99f6e4"
],
"direction": "120deg",
"use": {
"zh": "适合按钮、提示条、横幅方向感",
"en": "For buttons, callouts, and directional banners"
}
},
{
"name": {
"zh": "径向渐变",
"en": "Radial"
},
"type": "radial",
"colors": [
"#ffffff",
"#bae6fd",
"#e0f2fe"
],
"position": "35% 35%",
"use": {
"zh": "适合光源、聚焦和卡片高光",
"en": "For light source, focus, and card highlights"
}
},
{
"name": {
"zh": "三色渐变",
"en": "Three-color"
},
"type": "linear",
"colors": [
"#fee2e2",
"#fef3c7",
"#ccfbf1"
],
"direction": "135deg",
"use": {
"zh": "适合品牌氛围，但要控制面积",
"en": "For brand atmosphere, with controlled area"
}
}
]
},
"pattern": null
},
{
"id": "shadow",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Style"
},
"title": {
"zh": "阴影",
"en": "Box Shadow / Drop Shadow"
},
"aliases": {
"zh": [
"阴影",
"盒阴影",
"投影",
"elevation"
],
"en": [
"Box Shadow / Drop Shadow",
"shadow",
"box shadow",
"drop shadow"
]
},
"description": {
"zh": "通过模糊、偏移和透明度表现元素层级，常用于卡片、浮层、按钮和拖拽状态。",
"en": "A drop shadow behind an element to suggest lift and depth. Standard on cards, buttons, and modals."
},
"prompt": {
"zh": [
"为卡片添加轻量阴影，只在 hover 或浮层状态增强，避免整页组件都像漂浮起来。"
],
"en": [
"Add a soft shadow to the card to make it feel lifted."
]
},
"tip": {
"zh": "阴影要服务层级，不是装饰越多越高级；工作型界面通常更适合轻阴影加细边框。",
"en": "Tip: bigger Y offset, bigger blur, and a semi-transparent dark color (not pure black) looks most natural."
},
"preview": {
"kind": "shadow-variants",
"shadows": [
{
"name": "sm",
"label": {
"zh": "小阴影",
"en": "Small"
},
"value": "0 1px 2px rgba(0,0,0,0.05)"
},
{
"name": "md",
"label": {
"zh": "中阴影",
"en": "Medium"
},
"value": "0 4px 6px rgba(0,0,0,0.1)"
},
{
"name": "lg",
"label": {
"zh": "大阴影",
"en": "Large"
},
"value": "0 10px 15px rgba(0,0,0,0.1)"
},
{
"name": "xl",
"label": {
"zh": "超大阴影",
"en": "Extra Large"
},
"value": "0 20px 25px rgba(0,0,0,0.15)"
}
]
},
"pattern": null
},
{
"id": "border",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Style"
},
"title": {
"zh": "边框",
"en": "Border"
},
"aliases": {
"zh": [
"边框",
"描边",
"轮廓线",
"stroke"
],
"en": [
"Border",
"border",
"outline",
"stroke"
]
},
"description": {
"zh": "围绕组件边缘的线条，用来定义边界、分隔区域、表达状态或提高浅色界面的清晰度。",
"en": "A line around an element. Configurable by width, style (solid/dashed/dotted), and color."
},
"prompt": {
"zh": [
"为卡片和输入框添加 1px 低对比边框，聚焦或选中时提高边框颜色对比。"
],
"en": [
"Give the card a 1px light-gray border."
]
},
"tip": {
"zh": "边框适合替代过重阴影；但边框太多会让页面变碎，要和留白一起控制。",
"en": "\"border: 1px solid #ccc\" is the default pattern. solid = line, dashed = dashes, dotted = dots."
},
"preview": {
"kind": "border-styles",
"styles": [
{
"type": "solid",
"width": "1px",
"color": "#e5e7eb",
"label": {
"zh": "实线边框",
"en": "Solid"
}
},
{
"type": "dashed",
"width": "2px",
"color": "#3b82f6",
"label": {
"zh": "虚线边框",
"en": "Dashed"
}
},
{
"type": "dotted",
"width": "2px",
"color": "#8b5cf6",
"label": {
"zh": "点线边框",
"en": "Dotted"
}
},
{
"type": "double",
"width": "3px",
"color": "#10b981",
"label": {
"zh": "双线边框",
"en": "Double"
}
}
]
},
"pattern": null
},
{
"id": "border-radius",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Style"
},
"title": {
"zh": "圆角",
"en": "Border Radius"
},
"aliases": {
"zh": [
"圆角",
"边框圆角",
"角半径",
"radius"
],
"en": [
"Border Radius",
"border radius",
"rounded corners",
"corner radius"
]
},
"description": {
"zh": "控制组件角的圆润程度，会影响界面的亲和力、精致度和品牌性格。",
"en": "Rounds the corners of an element. Higher values = rounder. At 50% (on a square), you get a full circle."
},
"prompt": {
"zh": [
"统一页面圆角：按钮 8px，卡片 12px，标签使用胶囊圆角，并避免不同组件圆角混乱。"
],
"en": [
"Use an 8px border-radius on the buttons."
]
},
"tip": {
"zh": "圆角要成体系：工具型界面通常克制一些，胶囊按钮和头像才适合更大的圆角。",
"en": "Rough guide: 4px = barely rounded, 8px = softly rounded, 16px = heavily rounded, 9999px = pill/capsule shape."
},
"preview": {
"kind": "border-radius-demo",
"radii": [
{
"name": "sm",
"value": "0.125rem",
"label": {
"zh": "小圆角",
"en": "Small"
}
},
{
"name": "md",
"value": "0.375rem",
"label": {
"zh": "中圆角",
"en": "Medium"
}
},
{
"name": "lg",
"value": "0.5rem",
"label": {
"zh": "大圆角",
"en": "Large"
}
},
{
"name": "xl",
"value": "0.75rem",
"label": {
"zh": "超大圆角",
"en": "Extra Large"
}
},
{
"name": "full",
"value": "9999px",
"label": {
"zh": "全圆角",
"en": "Full"
}
}
]
},
"pattern": null
},
{
"id": "opacity",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Style"
},
"title": {
"zh": "透明度",
"en": "Opacity"
},
"aliases": {
"zh": [
"透明度",
"不透明度",
"alpha",
"半透明"
],
"en": [
"Opacity",
"opacity",
"transparency",
"alpha"
]
},
"description": {
"zh": "控制元素或颜色的可见程度，常用于遮罩、禁用态、叠加层和淡入淡出效果。",
"en": "How opaque an element is. 1 is fully visible, 0 is fully transparent, 0.5 is half. Used for overlays and fades."
},
"prompt": {
"zh": [
"为弹窗遮罩设置半透明背景，让页面内容退后但仍可感知，不影响弹窗文字对比度。"
],
"en": [
"Make the modal's overlay a black at 0.7 opacity."
]
},
"tip": {
"zh": "设置整个元素 opacity 会连文字一起变淡；如果只想背景半透明，用 rgba、hsla 或带透明度的颜色。",
"en": "Use rgba() to make only the background semi-transparent. Setting opacity on the whole element fades text too."
},
"preview": {
"kind": "opacity-levels",
"levels": [
{
"value": 1,
"percent": "100%",
"label": {
"zh": "完全不透明",
"en": "Fully opaque"
}
},
{
"value": 0.75,
"percent": "75%",
"label": {
"zh": "轻微透明",
"en": "Slight transparency"
}
},
{
"value": 0.5,
"percent": "50%",
"label": {
"zh": "半透明",
"en": "Semi-transparent"
}
},
{
"value": 0.25,
"percent": "25%",
"label": {
"zh": "高透明",
"en": "Highly transparent"
}
},
{
"value": 0,
"percent": "0%",
"label": {
"zh": "完全透明",
"en": "Fully transparent"
}
}
]
},
"pattern": null
},
{
"id": "backdrop-blur",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Style"
},
"title": {
"zh": "毛玻璃模糊",
"en": "Backdrop Blur"
},
"aliases": {
"zh": [
"毛玻璃模糊",
"背景模糊",
"背板模糊",
"backdrop blur"
],
"en": [
"Backdrop Blur",
"background blur",
"blurred backdrop",
"backdrop-filter blur"
]
},
"description": {
"zh": "模糊元素背后的内容，配合半透明背景形成玻璃质感，常用于顶栏、浮层和局部卡片。",
"en": "Blurs what's behind an element to create a frosted-glass look. Popular for headers, modal backgrounds, and cards."
},
"prompt": {
"zh": [
"为固定顶栏添加轻量 backdrop blur，背景半透明但文字保持高对比，滚动时仍能看清导航。"
],
"en": [
"Give the header a frosted-glass effect — blur the background and make it semi-transparent."
]
},
"tip": {
"zh": "Backdrop blur 是一个 CSS 效果；玻璃拟态是包含透明、边框、阴影和模糊的一整套风格。",
"en": "Backdrop blur is a CSS effect; glassmorphism is a broader style using transparency, borders, shadows, and blur."
},
"preview": {
"kind": "backdrop-blur-effect",
"blurs": [
{
"name": "sm",
"value": "4px",
"label": {
"zh": "轻微模糊",
"en": "Slight blur"
}
},
{
"name": "md",
"value": "8px",
"label": {
"zh": "中等模糊",
"en": "Medium blur"
}
},
{
"name": "lg",
"value": "16px",
"label": {
"zh": "强模糊",
"en": "Heavy blur"
}
},
{
"name": "xl",
"value": "24px",
"label": {
"zh": "超强模糊",
"en": "Extra heavy blur"
}
}
],
"content": {
"zh": "毛玻璃效果",
"en": "Frosted glass effect"
}
},
"pattern": null
},
{
"id": "image",
"category": "media",
"category_label": {
"zh": "媒体",
"en": "Media"
},
"title": {
"zh": "图片",
"en": "Image (img)"
},
"aliases": {
"zh": [
"图片",
"图像",
"照片",
"img"
],
"en": [
"Image (img)",
"image",
"img",
"picture",
"photo"
]
},
"description": {
"zh": "在界面中展示视觉内容的元素，需要处理尺寸比例、裁切、加载失败、替代文本和响应式适配。",
"en": "The element that displays an image. Key concerns: size, responsive scaling (max-width: 100%), and the alt attribute."
},
"prompt": {
"zh": [
"为文章卡片图片设置固定比例、object-fit: cover、懒加载、加载失败占位和有意义的 alt 文本。"
],
"en": [
"Make the images responsive — scale down with the viewport."
]
},
"tip": {
"zh": "图片不是只放 src；真实页面还要考虑比例、压缩、懒加载、alt 和深浅背景下的可读性。",
"en": "alt text matters for SEO and accessibility. Tell the AI: \"also set meaningful alt attributes\"."
},
"preview": {
"kind": "image-display",
"examples": [
{
"type": "responsive",
"alt": {
"zh": "响应式图片",
"en": "Responsive image"
},
"aspectRatio": "16/9"
},
{
"type": "thumbnail",
"alt": {
"zh": "缩略图",
"en": "Thumbnail"
},
"size": "80px"
},
{
"type": "avatar",
"alt": {
"zh": "头像",
"en": "Avatar"
},
"size": "48px",
"rounded": true
}
]
},
"pattern": null
},
{
"id": "video",
"category": "media",
"category_label": {
"zh": "媒体",
"en": "Media"
},
"title": {
"zh": "视频",
"en": "Video"
},
"aliases": {
"zh": [
"视频",
"视频嵌入",
"播放器",
"video"
],
"en": [
"Video",
"video",
"embed",
"YouTube embed"
]
},
"description": {
"zh": "在页面中播放或嵌入动态内容，可能来自本地文件、第三方 iframe 或短视频预览。",
"en": "Embeds a video — either a self-hosted file or an iframe from YouTube or a similar service."
},
"prompt": {
"zh": [
"嵌入一个 16:9 响应式视频播放器，支持封面图、播放/暂停、字幕入口、键盘操作、加载状态、播放失败提示和移动端触控。"
],
"en": [
"Embed a responsive 16:9 video player with poster, play/pause, captions entry, keyboard controls, loading, error state, and mobile touch support."
]
},
"tip": {
"zh": "视频要考虑封面、比例、自动播放限制、字幕、加载失败和用户是否真的需要播放。",
"en": "YouTube embeds use iframes. Always specify \"keep 16:9 and make it responsive\"."
},
"preview": {
"kind": "video-player",
"player": {
"title": {
"zh": "视频播放器",
"en": "Video Player"
},
"duration": "5:42",
"controls": true,
"aspectRatio": "16/9"
},
"controls": [
{
"icon": "play",
"label": {
"zh": "播放",
"en": "Play"
}
},
{
"icon": "pause",
"label": {
"zh": "暂停",
"en": "Pause"
}
},
{
"icon": "volume",
"label": {
"zh": "音量",
"en": "Volume"
}
},
{
"icon": "fullscreen",
"label": {
"zh": "全屏",
"en": "Fullscreen"
}
}
]
},
"pattern": null
},
{
"id": "icon",
"category": "media",
"category_label": {
"zh": "媒体",
"en": "Media"
},
"title": {
"zh": "图标",
"en": "Icon"
},
"aliases": {
"zh": [
"图标",
"SVG 图标",
"线性图标",
"Lucide"
],
"en": [
"Icon",
"icon",
"SVG icon",
"Font Awesome",
"Lucide"
]
},
"description": {
"zh": "用小型符号辅助识别操作、状态或类别，常见于按钮、导航、提示和工具栏。",
"en": "Small pictograms that convey meaning — arrows, hamburger, search, check. Delivered as SVG or icon fonts."
},
"prompt": {
"zh": [
"为工具栏按钮添加 Lucide 图标，并配合 tooltip 或可见文本说明每个操作的含义。"
],
"en": [
"Add the Heroicons search icon to the nav."
]
},
"tip": {
"zh": "图标不能替代所有文字；不常见的图标必须配标签、tooltip 或可访问名称。",
"en": "Popular icon libraries: Heroicons, Lucide, Font Awesome, Material Icons. Name one and the AI will wire it up."
},
"preview": {
"kind": "icon-set",
"icons": [
{
"name": "home",
"label": {
"zh": "首页",
"en": "Home"
}
},
{
"name": "user",
"label": {
"zh": "用户",
"en": "User"
}
},
{
"name": "settings",
"label": {
"zh": "设置",
"en": "Settings"
}
},
{
"name": "heart",
"label": {
"zh": "喜欢",
"en": "Like"
}
},
{
"name": "star",
"label": {
"zh": "收藏",
"en": "Favorite"
}
},
{
"name": "bell",
"label": {
"zh": "通知",
"en": "Notification"
}
}
],
"sizes": [
"sm",
"md",
"lg"
]
},
"pattern": null
},
{
"id": "favicon",
"category": "media",
"category_label": {
"zh": "媒体",
"en": "Media"
},
"title": {
"zh": "网站图标",
"en": "Favicon"
},
"aliases": {
"zh": [
"网站图标",
"浏览器图标",
"标签页图标",
"站点图标"
],
"en": [
"Favicon",
"favicon",
"tab icon",
"site icon"
]
},
"description": {
"zh": "显示在浏览器标签、收藏夹和部分分享入口的小图标，用来帮助用户识别站点。",
"en": "The tiny icon that appears in the browser tab. Important for branding and tab recognition."
},
"prompt": {
"zh": [
"为站点配置 favicon，提供 SVG 和 32x32 PNG 版本，并保证深浅浏览器主题下都清晰。"
],
"en": [
"Set up a favicon as a 32×32 PNG."
]
},
"tip": {
"zh": "favicon 要在很小尺寸下仍可识别，复杂 Logo 往往需要简化成单一符号。",
"en": "SVG favicons are the modern choice. Serving a 32×32 PNG alongside is a solid best practice."
},
"preview": {
"kind": "favicon-formats",
"formats": [
{
"type": "ico",
"size": "16x16, 32x32",
"usage": {
"zh": "浏览器标签页",
"en": "Browser tab"
}
},
{
"type": "png",
"size": "192x192",
"usage": {
"zh": "Android 主屏",
"en": "Android home"
}
},
{
"type": "svg",
"size": "any",
"usage": {
"zh": "现代浏览器",
"en": "Modern browsers"
}
},
{
"type": "apple-touch-icon",
"size": "180x180",
"usage": {
"zh": "iOS 主屏",
"en": "iOS home"
}
}
]
},
"pattern": null
},
{
"id": "ogp",
"category": "media",
"category_label": {
"zh": "媒体",
"en": "Media"
},
"title": {
"zh": "OGP 分享图",
"en": "Open Graph Image"
},
"aliases": {
"zh": [
"OGP 分享图",
"社交分享图",
"og:image",
"Twitter Card"
],
"en": [
"Open Graph Image",
"OGP",
"og:image",
"social share image",
"Twitter card"
]
},
"description": {
"zh": "页面被分享到社交平台或聊天工具时显示的标题、描述和预览图。",
"en": "The preview image shown when a URL is shared on social media. Recommended size: 1200×630px."
},
"prompt": {
"zh": [
"为页面补充 OGP 元信息：标题、描述、1200x630 分享图、站点名和 twitter card 配置。"
],
"en": [
"Set up the OGP meta tags with title, description, and image URL."
]
},
"tip": {
"zh": "分享图要真实表达页面内容，不要只放抽象渐变背景；标题和描述也要和页面主题一致。",
"en": "Minimum set: og:title, og:description, og:image, twitter:card. Asking for \"OGP setup\" covers all of them."
},
"preview": {
"kind": "ogp-preview",
"metadata": {
"title": {
"zh": "Mianhua - 现代化内容管理系统",
"en": "Mianhua - Modern CMS"
},
"description": {
"zh": "一个优雅的个人博客和内容中枢",
"en": "An elegant personal blog and content hub"
},
"image": {
"url": "https://mianhua.me/og-image.png",
"width": "1200",
"height": "630"
},
"type": "website"
}
},
"pattern": null
},
{
"id": "object-fit",
"category": "media",
"category_label": {
"zh": "媒体",
"en": "Media"
},
"title": {
"zh": "图像适配",
"en": "Object Fit"
},
"aliases": {
"zh": [
"图像适配",
"对象适合",
"图像覆盖",
"图像包含",
"裁剪"
],
"en": [
"Object Fit",
"object-fit",
"image cover",
"image contain",
"crop"
]
},
"description": {
"zh": "控制图片或视频如何填充固定比例的容器，常用 cover 裁切填满，contain 完整显示。",
"en": "CSS that controls how an image fits inside its box. cover fills the box (cropping); contain shows the whole image."
},
"prompt": {
"zh": [
"让卡片缩略图使用 object-fit: cover，并固定图片比例，避免不同尺寸图片撑乱卡片。"
],
"en": [
"Use object-fit: cover on card thumbnails so they share a consistent size."
]
},
"tip": {
"zh": "cover 会裁切边缘以填满容器；contain 会完整显示素材，但可能留下空白。",
"en": "cover = crops overflow to fill the box; contain = shows the whole image, potentially with blank space."
},
"preview": {
"kind": "object-fit-modes",
"modes": [
{
"value": "contain",
"label": {
"zh": "完整显示",
"en": "Contain"
},
"description": {
"zh": "保持比例，完整显示",
"en": "Keep aspect, show all"
}
},
{
"value": "cover",
"label": {
"zh": "覆盖容器",
"en": "Cover"
},
"description": {
"zh": "保持比例，填满容器",
"en": "Keep aspect, fill container"
}
},
{
"value": "fill",
"label": {
"zh": "拉伸填充",
"en": "Fill"
},
"description": {
"zh": "拉伸以填满容器",
"en": "Stretch to fill"
}
},
{
"value": "scale-down",
"label": {
"zh": "缩小适应",
"en": "Scale Down"
},
"description": {
"zh": "缩小但不放大",
"en": "Shrink but not enlarge"
}
}
]
},
"pattern": null
},
{
"id": "component",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Dev Basics"
},
"title": {
"zh": "组件",
"en": "Component"
},
"aliases": {
"zh": [
"组件",
"可复用模块",
"界面单元",
"组件封装"
],
"en": [
"Component",
"component",
"reusable part",
"UI part"
]
},
"description": {
"zh": "可复用的界面单元，把结构、样式、状态和交互收在一起，适合沉淀按钮、卡片、弹窗这类会反复出现的 UI。",
"en": "A reusable piece of UI. Buttons, cards, and headers are built as components and reused throughout the site."
},
"prompt": {
"zh": [
"把按钮抽成可复用组件，支持尺寸、视觉层级、禁用态、加载态、图标位置和点击事件。",
"为这个卡片组件补齐默认、悬停、选中、空数据和移动端布局状态。"
],
"en": [
"Turn the button into a reusable component that accepts color and size variants."
]
},
"tip": {
"zh": "让 AI 写组件时，要说明输入数据、状态变化和边界场景；只说“做成组件”通常不够。",
"en": "Frameworks like React, Vue, and Svelte are component-oriented. Even in plain HTML, consistent classes give you reuse."
},
"preview": {
"kind": "component-structure",
"example": {
"name": {
"zh": "UserCard",
"en": "UserCard"
},
"props": [
{
"name": "name",
"type": "string",
"desc": {
"zh": "用户名",
"en": "User name"
}
},
{
"name": "avatar",
"type": "string",
"desc": {
"zh": "头像 URL",
"en": "Avatar URL"
}
},
{
"name": "status",
"type": "online | offline",
"desc": {
"zh": "在线状态",
"en": "Online status"
}
}
],
"preview": {
"zh": "",
"en": ""
}
}
},
"pattern": null
},
{
"id": "api",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Dev Basics"
},
"title": {
"zh": "API",
"en": "API"
},
"aliases": {
"zh": [
"API",
"REST API",
"GraphQL",
"外部数据"
],
"en": [
"API",
"REST API",
"GraphQL",
"external data"
]
},
"description": {
"zh": "前端或后端与服务交换数据的接口，例如获取文章、保存表单、登录鉴权、支付回调或第三方数据。",
"en": "A way to exchange data with external services — weather data, payments, social integrations, and more."
},
"prompt": {
"zh": [
"接入文章列表 API，处理加载中、空数据、错误提示和重试按钮。",
"为提交表单设计 POST API 调用，成功后显示 toast，失败时保留用户输入。"
],
"en": [
"Fetch data from a weather API and display today's forecast."
]
},
"tip": {
"zh": "描述 API 时要带上方法、路径、请求字段、返回结构和失败处理，否则 AI 容易只写一个理想状态。",
"en": "REST and GraphQL are different API styles. Starting with \"fetch data via the API\" is enough for the AI to work with."
},
"preview": {
"kind": "api-request",
"endpoints": [
{
"method": "GET",
"path": "/api/users",
"desc": {
"zh": "获取用户列表",
"en": "Get user list"
},
"response": {
"zh": "{ \"data\": [...], \"total\": 100 }",
"en": "{ \"data\": [...], \"total\": 100 }"
}
},
{
"method": "POST",
"path": "/api/users",
"desc": {
"zh": "创建新用户",
"en": "Create new user"
},
"body": {
"zh": "{ \"name\": \"张三\", \"email\": \"...\" }",
"en": "{ \"name\": \"John\", \"email\": \"...\" }"
}
}
]
},
"pattern": null
},
{
"id": "deploy",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Dev Basics"
},
"title": {
"zh": "部署",
"en": "Deploy"
},
"aliases": {
"zh": [
"部署",
"发布",
"上线",
"托管",
"发布流程"
],
"en": [
"Deploy",
"deploy",
"publish",
"host",
"hosting"
]
},
"description": {
"zh": "把本地项目构建、检查并发布到可访问环境的过程，常见目标包括 Vercel、Netlify、GitHub Pages 或自有服务器。",
"en": "Publishing your site to the internet. Typical options are Vercel, Netlify, and GitHub Pages."
},
"prompt": {
"zh": [
"为这个 Next.js 项目整理部署步骤：环境变量、构建命令、预览环境、生产发布和回滚方式。",
"检查部署前风险：缺失 env、构建失败、静态资源路径、API 地址和缓存策略。"
],
"en": [
"Deploy this site to Vercel."
]
},
"tip": {
"zh": "部署 prompt 不要只写“帮我上线”，要说明平台、构建命令、环境变量和发布后的验证方式。",
"en": "Static sites (HTML/CSS/JS) deploy free on Vercel or Netlify. Connect GitHub and you get auto-deploy on every push."
},
"preview": {
"kind": "deploy-pipeline",
"steps": [
{
"stage": {
"zh": "1. 构建",
"en": "1. Build"
},
"cmd": "npm run build",
"status": "success"
},
{
"stage": {
"zh": "2. 测试",
"en": "2. Test"
},
"cmd": "npm test",
"status": "success"
}
]
},
"pattern": null
},
{
"id": "npm",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Dev Basics"
},
"title": {
"zh": "npm / 包管理",
"en": "npm (Node Package Manager)"
},
"aliases": {
"zh": [
"npm",
"包管理",
"npm 包",
"依赖管理",
"脚本命令"
],
"en": [
"npm (Node Package Manager)",
"npm",
"package",
"library",
"dependency"
]
},
"description": {
"zh": "JavaScript 项目的包管理与脚本工具，用来安装依赖、运行开发服务器、构建项目和执行检查命令。",
"en": "The package manager for JavaScript — install reusable libraries and utilities you need."
},
"prompt": {
"zh": [
"先查看项目使用 npm、pnpm 还是 yarn，再按现有包管理器安装图表库并补充使用示例。",
"解释 package.json 里的 scripts：dev、build、lint、test 分别在什么时候运行。"
],
"en": [
"Install the Swiper library via npm and build a carousel."
]
},
"tip": {
"zh": "让 AI 安装依赖前先确认项目已有包管理器，混用 npm 和 pnpm 很容易改乱 lockfile。",
"en": "\"npm install \" adds a dependency, recorded in package.json. The AI will handle it end-to-end."
},
"preview": {
"kind": "npm-commands",
"commands": [
{
"cmd": "npm install",
"desc": {
"zh": "安装依赖",
"en": "Install dependencies"
}
},
{
"cmd": "npm run dev",
"desc": {
"zh": "启动开发服务器",
"en": "Start dev server"
}
}
]
},
"pattern": null
},
{
"id": "dom",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Dev Basics"
},
"title": {
"zh": "DOM",
"en": "DOM"
},
"aliases": {
"zh": [
"DOM",
"文档对象模型",
"元素树"
],
"en": [
"DOM",
"document object model",
"element tree"
]
},
"description": {
"zh": "浏览器把 HTML 解析成的页面节点树，JS 可以读取、插入、删除或更新这些节点，从而改变真实页面。",
"en": "The tree of elements the browser builds from HTML. JavaScript manipulates the DOM to change the page dynamically."
},
"prompt": {
"zh": [
"点击“添加”后在列表 DOM 中插入一张新卡，并让键盘焦点移动到新卡标题。",
"监听搜索输入，实时更新 DOM 中的结果数量、空状态和高亮关键词。"
],
"en": [
"On button click, append a new card to the DOM."
]
},
"tip": {
"zh": "现代框架通常通过状态驱动 DOM 更新；除非项目是原生 JS，不要让 AI 随意写直接操作 DOM 的代码。",
"en": "\"Manipulating the DOM\" means changing the live HTML via JavaScript — you can add, remove, or modify elements."
},
"preview": {
"kind": "dom-tree",
"operations": [
{
"method": "querySelector()",
"desc": {
"zh": "选择元素",
"en": "Select element"
}
}
]
},
"pattern": null
},
{
"id": "event",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Dev Basics"
},
"title": {
"zh": "事件",
"en": "Event"
},
"aliases": {
"zh": [
"事件",
"事件监听器",
"addEventListener"
],
"en": [
"Event",
"event",
"event listener",
"addEventListener"
]
},
"description": {
"zh": "页面响应用户或系统变化的触发机制，比如点击、输入、提交、滚动、拖拽、键盘按下和窗口尺寸变化。",
"en": "The mechanism for detecting user actions — click, input, scroll. The \"when X happens\" side of \"when X happens, do Y\"."
},
"prompt": {
"zh": [
"在表单提交事件中先校验字段，失败时阻止提交并把焦点移到第一个错误项。",
"为筛选器添加 change 事件，更新列表结果并同步 URL 查询参数。"
],
"en": [
"On the submit button's click event, validate the form."
]
},
"tip": {
"zh": "写事件需求时要说清触发源、触发后动作、是否防抖、是否可键盘操作，以及失败时怎么反馈。",
"en": "Many event types: click, scroll, input, submit, resize, keydown… Just say \"when X happens\" and the AI wires it up."
},
"preview": {
"kind": "event-demo",
"events": [
{
"type": "click",
"desc": {
"zh": "点击事件",
"en": "Click event"
}
},
{
"type": "input",
"desc": {
"zh": "输入事件",
"en": "Input event"
}
}
]
},
"pattern": null
},
{
"id": "variable",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Dev Basics"
},
"title": {
"zh": "CSS 变量",
"en": "CSS Variables"
},
"aliases": {
"zh": [
"CSS 变量",
"自定义属性",
"CSS custom properties",
"样式变量"
],
"en": [
"CSS Variables",
"CSS custom properties",
"style variables",
"custom properties"
]
},
"description": {
"zh": "CSS 中可复用的命名值，适合统一管理颜色、间距、圆角、阴影和主题，让改一处就能影响整套界面。",
"en": "Named values (colors, sizes) managed in one place. Define \"--primary: #7c6aef\" once and reuse everywhere."
},
"prompt": {
"zh": [
"使用 CSS 变量管理主色、背景、边框、文字和焦点环，后续切换主题只改变量值。",
"把卡片圆角、阴影和间距抽成 CSS 变量，避免每个组件写一套不同数值。"
],
"en": [
"Manage the primary color with a CSS variable so changing one value updates the whole site."
]
},
"tip": {
"zh": "CSS 变量适合做主题和设计令牌，但变量名要表达用途，例如 --color-surface，不要只叫 --blue。",
"en": "Essential for dark mode — swap CSS variable values and the whole palette shifts."
},
"preview": {
"kind": "variable-scope",
"examples": [
{
"scope": ":root",
"code": "--color-brand: #2563eb;",
"desc": {
"zh": "全局品牌色",
"en": "Global brand color"
}
},
{
"scope": ".dark",
"code": "--color-surface: #111827;",
"desc": {
"zh": "深色主题表面色",
"en": "Dark theme surface"
}
}
]
},
"pattern": null
},
{
"id": "class",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Dev Basics"
},
"title": {
"zh": "CSS 类",
"en": "CSS Class"
},
"aliases": {
"zh": [
"CSS 类",
"CSS类",
"类名称"
],
"en": [
"CSS Class",
"CSS class",
"className"
]
},
"description": {
"zh": "给 HTML 元素添加的样式标识，用来复用视觉规则、组合状态，并让同类元素保持一致。",
"en": "A label attached to an HTML element for styling. Elements sharing a class share its styles."
},
"prompt": {
"zh": [
"为 .btn-primary、.btn-secondary 和 .btn-danger 写清按钮类名，覆盖默认、hover、focus、disabled 状态。",
"整理这组卡片的 CSS 类命名，让结构类、状态类和尺寸类分开，不要互相覆盖。"
],
"en": [
"Style the .btn-primary class with a purple background and white text."
]
},
"tip": {
"zh": "类名最好描述角色和状态，例如 card、card--selected、btn--loading；不要用颜色或位置当唯一语义。",
"en": "Class selectors start with a dot. One element can have many classes (e.g., class=\"btn btn-primary btn-lg\")."
},
"preview": {
"kind": "class-structure",
"example": {
"name": {
"zh": "按钮类组合",
"en": "Button class combo"
},
"code": {
"zh": "",
"en": ""
}
}
},
"pattern": null
},
{
"id": "dark-mode",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Dev Basics"
},
"title": {
"zh": "深色模式",
"en": "Dark Mode"
},
"aliases": {
"zh": [
"深色模式",
"浅色模式",
"主题切换"
],
"en": [
"Dark Mode",
"dark mode",
"light mode",
"theme toggle"
]
},
"description": {
"zh": "为同一界面提供深色与浅色两套主题，重点是背景、文字、边框、阴影、图表和状态色都能保持可读。",
"en": "A dark-background, light-text color scheme. Reduces eye strain, saves battery. Usually toggled with a switch."
},
"prompt": {
"zh": [
"添加深色/浅色模式切换，用 CSS 变量管理颜色，并记住用户选择。",
"检查深色模式下卡片、输入框、弹窗、图表和禁用态的对比度。"
],
"en": [
"Add a dark/light mode toggle, managing colors through CSS variables."
]
},
"tip": {
"zh": "深色模式不是简单反色，阴影、边框和强调色都要重新校准；同时支持 prefers-color-scheme 会更完整。",
"en": "You can also sync with the OS preference via prefers-color-scheme. CSS variables make it far easier to manage."
},
"preview": {
"kind": "dark-mode-toggle",
"themes": [
{
"mode": "light",
"label": {
"zh": "浅色",
"en": "Light"
}
},
{
"mode": "dark",
"label": {
"zh": "深色",
"en": "Dark"
}
}
]
},
"pattern": null
},
{
"id": "accessibility",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Dev Basics"
},
"title": {
"zh": "无障碍访问",
"en": "Accessibility (a11y)"
},
"aliases": {
"zh": [
"无障碍访问",
"辅助功能",
"a11y",
"ARIA",
"WAI-ARIA",
"屏幕阅读器"
],
"en": [
"Accessibility (a11y)",
"accessibility",
"a11y",
"ARIA",
"WAI-ARIA",
"screen reader"
]
},
"description": {
"zh": "让更多用户能顺利使用界面的设计与实现要求，重点包括语义结构、键盘操作、焦点可见、对比度和屏幕阅读器信息。",
"en": "Design principles for making your site usable by everyone, regardless of ability. Alt text, keyboard navigation, and color contrast are core."
},
"prompt": {
"zh": [
"检查这个弹窗的无障碍：打开后聚焦标题，Tab 不离开弹窗，Esc 可关闭，关闭后焦点回到触发按钮。",
"为图标按钮补充可访问名称，并确保键盘用户能看到清晰 focus ring。"
],
"en": [
"Make it accessible: add alt attributes, ARIA labels, and full keyboard navigation."
]
},
"tip": {
"zh": "不要把 a11y 只理解成加 aria；优先用正确 HTML 语义，再补键盘、焦点、对比度和可访问名称。",
"en": "Minimum bar: alt text on images, aria-label on buttons, 4.5:1 contrast ratio, and Tab-key navigation to every control."
},
"preview": {
"kind": "accessibility-checklist",
"items": [
{
"rule": "ARIA",
"desc": {
"zh": "添加标签",
"en": "Add labels"
}
}
]
},
"pattern": null
},
{
"id": "alert",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "警告提示",
"en": "Alert"
},
"aliases": {
"zh": [
"警告提示",
"警示框",
"系统提示",
"通知条"
],
"en": [
"Alert",
"banner alert",
"system notice",
"inline alert"
]
},
"description": {
"zh": "用于向用户展示重要状态、风险或操作结果的提示区域，通常会出现在页面内容附近。",
"en": "A prominent message block for important states, risks, or results, usually placed near the relevant content."
},
"prompt": {
"zh": [
"在表单顶部添加一个警告提示，说明保存失败的原因、受影响字段和下一步操作；提供重试按钮，并让屏幕阅读器能读到状态变化。"
],
"en": [
"Add an alert above the form that explains why saving failed and includes a retry action."
]
},
"tip": {
"zh": "警告提示要说清楚发生了什么、影响是什么、下一步怎么做。不要只放一个红色框。",
"en": "Alerts should explain what happened, why it matters, and what to do next. Do not rely on color alone."
},
"preview": {
"kind": "term-lab",
"variant": "notice",
"title": {
"zh": "保存失败",
"en": "Save failed"
},
"subtitle": {
"zh": "网络超时，3 个字段未保存",
"en": "Network timeout, 3 fields unsaved"
},
"chips": [
{
"label": {
"zh": "重试",
"en": "Retry"
},
"tone": "danger"
},
{
"label": {
"zh": "查看字段",
"en": "Review fields"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "邮箱",
"en": "Email"
},
"desc": {
"zh": "格式正确，等待保存",
"en": "Valid, waiting to save"
},
"tone": "success"
},
{
"title": {
"zh": "头像",
"en": "Avatar"
},
"desc": {
"zh": "上传中断，可重试",
"en": "Upload interrupted, retry available"
},
"tone": "danger"
}
]
},
"pattern": null
},
{
"id": "popover",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "浮层气泡",
"en": "Popover"
},
"aliases": {
"zh": [
"浮层气泡",
"弹出层",
"小浮窗",
"气泡面板"
],
"en": [
"Popover",
"floating panel",
"popout",
"context popover"
]
},
"description": {
"zh": "依附在某个触发点旁边的小型浮层，用来展示补充信息、快捷操作或轻量表单。",
"en": "A small floating panel anchored to a trigger, used for extra information, quick actions, or lightweight forms."
},
"prompt": {
"zh": [
"点击用户头像时打开一个 popover，包含账户信息、设置入口和退出登录按钮；支持点击外部关闭、Esc 关闭、焦点回到头像按钮。"
],
"en": [
"Open a popover from the avatar with account details, settings, and a sign-out action."
]
},
"tip": {
"zh": "Popover 适合轻任务；如果内容很长或需要强确认，应该改用 modal 或 drawer。",
"en": "Popovers are for lightweight tasks. Use a modal or drawer when content is long or confirmation is important."
},
"preview": {
"kind": "term-lab",
"variant": "popover",
"title": {
"zh": "Mianhua Admin",
"en": "Mianhua Admin"
},
"subtitle": {
"zh": "头像触发的小型账户菜单",
"en": "Small account menu anchored to avatar"
},
"chips": [
{
"label": {
"zh": "Esc 关闭",
"en": "Esc closes"
},
"tone": "muted"
},
{
"label": {
"zh": "焦点回退",
"en": "Focus returns"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "账户设置",
"en": "Account settings"
},
"desc": {
"zh": "打开设置页",
"en": "Open settings page"
},
"tone": "muted"
},
{
"title": {
"zh": "退出登录",
"en": "Sign out"
},
"desc": {
"zh": "需要确认",
"en": "Requires confirmation"
},
"tone": "danger"
}
]
},
"pattern": null
},
{
"id": "drawer",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "抽屉面板",
"en": "Drawer"
},
"aliases": {
"zh": [
"抽屉面板",
"侧滑面板",
"侧边弹层",
"抽屉"
],
"en": [
"Drawer",
"side panel",
"slide-over",
"offcanvas"
]
},
"description": {
"zh": "从屏幕边缘滑出的面板，常用于详情、筛选、购物车、设置或移动端导航。",
"en": "A panel that slides in from a screen edge, often used for details, filters, carts, settings, or mobile navigation."
},
"prompt": {
"zh": [
"点击筛选按钮后从右侧打开抽屉面板，包含价格、分类和状态筛选；提供应用、重置、关闭按钮，并在移动端占满安全宽度。"
],
"en": [
"Open a right-side drawer from the filter button with price, category, and status filters."
]
},
"tip": {
"zh": "抽屉要明确关闭方式、焦点范围和移动端宽度，否则很容易遮挡主流程。",
"en": "Drawers need clear close behavior, focus handling, and responsive width so they do not block the main flow."
},
"preview": {
"kind": "term-lab",
"variant": "drawer",
"title": {
"zh": "筛选面板",
"en": "Filter drawer"
},
"subtitle": {
"zh": "右侧滑出，移动端占满安全宽度",
"en": "Slides from right, safe full width on mobile"
},
"chips": [
{
"label": {
"zh": "应用筛选",
"en": "Apply"
},
"tone": "muted"
},
{
"label": {
"zh": "重置",
"en": "Reset"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "价格范围",
"en": "Price range"
},
"desc": {
"zh": "¥100 - ¥500",
"en": "$100 - $500"
},
"tone": "muted"
},
{
"title": {
"zh": "状态",
"en": "Status"
},
"desc": {
"zh": "草稿 / 已发布",
"en": "Draft / Published"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "command-palette",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "命令面板",
"en": "Command Palette"
},
"aliases": {
"zh": [
"命令面板",
"快捷命令",
"命令菜单",
"全局搜索"
],
"en": [
"Command Palette",
"quick command",
"command menu",
"global command search"
]
},
"description": {
"zh": "通过快捷键或搜索框打开的全局操作入口，让用户快速跳转页面、执行命令或查找内容。",
"en": "A global action surface opened by shortcut or search, helping users navigate, run commands, or find content quickly."
},
"prompt": {
"zh": [
"添加一个 Cmd/Ctrl+K 命令面板，支持搜索页面、项目和常用操作；结果按类型分组，支持上下键选择、回车执行、空结果提示和 Esc 关闭。"
],
"en": [
"Add a Cmd/Ctrl+K command palette that searches pages, projects, and common actions."
]
},
"tip": {
"zh": "命令面板适合高频工具型产品，结果要分组，并支持键盘上下选择和回车执行。",
"en": "Command palettes fit power-user tools. Group results and support arrow-key selection plus Enter execution."
},
"preview": {
"kind": "term-lab",
"variant": "command",
"title": {
"zh": "Cmd/Ctrl + K",
"en": "Cmd/Ctrl + K"
},
"subtitle": {
"zh": "全局搜索页面、项目和操作",
"en": "Search pages, projects, and actions"
},
"chips": [
{
"label": {
"zh": "↑↓ 选择",
"en": "Arrow select"
},
"tone": "muted"
},
{
"label": {
"zh": "Enter 执行",
"en": "Enter runs"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "打开术语页",
"en": "Open glossary"
},
"desc": {
"zh": "页面",
"en": "Page"
},
"tone": "brand"
},
{
"title": {
"zh": "复制当前 prompt",
"en": "Copy current prompt"
},
"desc": {
"zh": "操作",
"en": "Action"
},
"tone": "muted"
},
{
"title": {
"zh": "无结果状态",
"en": "Empty result"
},
"desc": {
"zh": "输入 zzz 时出现",
"en": "Shown for zzz"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "data-table",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "数据表格",
"en": "Data Table"
},
"aliases": {
"zh": [
"数据表格",
"表格",
"表格列表",
"数据网格"
],
"en": [
"Data Table",
"table grid",
"data grid",
"tabular data"
]
},
"description": {
"zh": "用于展示多行多列结构化数据的组件，通常包含排序、筛选、分页、选择和批量操作。",
"en": "A component for structured rows and columns, often with sorting, filtering, pagination, selection, and bulk actions."
},
"prompt": {
"zh": [
"设计一个数据表格，支持搜索、状态筛选、列排序、分页、行选择和批量操作，并补齐加载、空数据和错误状态。"
],
"en": [
"Design a data table with search, status filters, column sorting, pagination, and bulk delete."
]
},
"tip": {
"zh": "数据表格要先定义列优先级、行操作和状态反馈；移动端可以改成卡片列表，不要硬塞完整表格。",
"en": "Define column priority plus empty, loading, and error states first. Do not force a full table onto mobile."
},
"preview": {
"kind": "term-lab",
"variant": "data-table",
"title": {
"zh": "成员列表",
"en": "Members table"
},
"subtitle": {
"zh": "排序、选择、状态和批量操作",
"en": "Sort, select, status, and bulk actions"
},
"metrics": [
{
"label": {
"zh": "已选",
"en": "Selected"
},
"value": "3",
"tone": "brand"
},
{
"label": {
"zh": "列",
"en": "Columns"
},
"value": "6",
"tone": "brand"
}
],
"rows": [
{
"title": {
"zh": "Ada Lovelace",
"en": "Ada Lovelace"
},
"desc": {
"zh": "Owner · Active",
"en": "Owner · Active"
},
"tone": "success"
},
{
"title": {
"zh": "Lin Chen",
"en": "Lin Chen"
},
"desc": {
"zh": "Editor · Pending",
"en": "Editor · Pending"
},
"tone": "warning"
},
{
"title": {
"zh": "Mika Stone",
"en": "Mika Stone"
},
"desc": {
"zh": "Viewer · Disabled",
"en": "Viewer · Disabled"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "empty-state",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "空状态",
"en": "Empty State"
},
"aliases": {
"zh": [
"空状态",
"无数据状态",
"空页面",
"空列表"
],
"en": [
"Empty State",
"no data state",
"blank state",
"zero state"
]
},
"description": {
"zh": "当页面、列表或搜索结果没有内容时显示的引导区域，通常包含原因、下一步和创建入口。",
"en": "A guided area shown when a page, list, or search result has no content, usually with context, next step, and a creation action."
},
"prompt": {
"zh": [
"为空项目列表设计空状态：说明为什么为空、这里未来会显示什么，并提供创建第一个项目和导入示例数据两个入口。"
],
"en": [
"Design an empty state for an empty project list that explains what will appear here and offers a create-first-project button."
]
},
"tip": {
"zh": "空状态不要只写“暂无数据”，它应该告诉用户为什么为空，以及现在能做什么。",
"en": "Do not only say “No data”. Explain why it is empty and what the user can do next."
},
"preview": {
"kind": "term-lab",
"variant": "empty",
"title": {
"zh": "还没有项目",
"en": "No projects yet"
},
"subtitle": {
"zh": "这里会显示你创建或导入的项目",
"en": "Created or imported projects will appear here"
},
"chips": [
{
"label": {
"zh": "创建项目",
"en": "Create project"
},
"tone": "brand"
},
{
"label": {
"zh": "导入示例",
"en": "Import sample"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "原因",
"en": "Reason"
},
"desc": {
"zh": "当前筛选下没有内容",
"en": "No content under current filter"
},
"tone": "muted"
},
{
"title": {
"zh": "下一步",
"en": "Next step"
},
"desc": {
"zh": "创建第一个项目",
"en": "Create the first project"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "stepper",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "步骤条",
"en": "Stepper"
},
"aliases": {
"zh": [
"步骤条",
"步骤导航",
"流程进度",
"分步流程"
],
"en": [
"Stepper",
"steps",
"progress steps",
"wizard steps"
]
},
"description": {
"zh": "用于展示多步骤流程的当前位置、已完成步骤和后续步骤，常见于注册、支付和配置向导。",
"en": "A component that shows current, completed, and upcoming steps in multi-step flows such as onboarding, checkout, and setup wizards."
},
"prompt": {
"zh": [
"做一个三步注册流程步骤条，当前步骤高亮，完成步骤显示对勾。"
],
"en": [
"Create a three-step signup stepper with the current step highlighted and completed steps checked."
]
},
"tip": {
"zh": "步骤条适合用户必须按顺序完成的流程；如果步骤可以随意跳转，要明确可点击规则。",
"en": "Steppers fit ordered flows. If users can jump around, make clickable rules explicit."
},
"preview": {
"kind": "term-lab",
"variant": "steps",
"title": {
"zh": "注册流程",
"en": "Signup flow"
},
"subtitle": {
"zh": "当前步骤、完成步骤和下一步清晰可见",
"en": "Current, done, and next steps are visible"
},
"rows": [
{
"title": {
"zh": "1 账户",
"en": "1 Account"
},
"desc": {
"zh": "已完成",
"en": "Done"
},
"tone": "success"
},
{
"title": {
"zh": "2 团队",
"en": "2 Team"
},
"desc": {
"zh": "当前步骤",
"en": "Current"
},
"tone": "brand"
},
{
"title": {
"zh": "3 结算",
"en": "3 Billing"
},
"desc": {
"zh": "下一步",
"en": "Next"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "timeline",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "时间线",
"en": "Timeline"
},
"aliases": {
"zh": [
"时间线",
"事件线",
"历史时间轴",
"timeline"
],
"en": [
"Timeline",
"event timeline",
"history timeline",
"chronological view"
]
},
"description": {
"zh": "按时间顺序展示事件、更新或里程碑的模式，适合审计日志、订单进度和项目动态。",
"en": "A chronological pattern for events, updates, or milestones, useful for audit logs, order progress, and project activity."
},
"prompt": {
"zh": [
"为订单详情页添加时间线，展示下单、支付、发货和签收节点。"
],
"en": [
"Add a timeline to the order detail page showing placed, paid, shipped, and delivered events."
]
},
"tip": {
"zh": "时间线要强调事件顺序和状态变化，不要把它做成普通列表。",
"en": "A timeline should emphasize sequence and state change, not behave like a plain list."
},
"preview": {
"kind": "term-lab",
"variant": "timeline",
"title": {
"zh": "订单时间线",
"en": "Order timeline"
},
"subtitle": {
"zh": "按时间展示关键节点和状态",
"en": "Shows milestones and status by time"
},
"rows": [
{
"title": {
"zh": "09:20 下单",
"en": "09:20 Ordered"
},
"desc": {
"zh": "客户提交订单",
"en": "Customer placed order"
},
"tone": "success"
},
{
"title": {
"zh": "09:24 支付",
"en": "09:24 Paid"
},
"desc": {
"zh": "支付确认",
"en": "Payment confirmed"
},
"tone": "success"
},
{
"title": {
"zh": "10:10 发货",
"en": "10:10 Shipped"
},
"desc": {
"zh": "等待物流揽收",
"en": "Waiting pickup"
},
"tone": "warning"
}
]
},
"pattern": null
},
{
"id": "pricing-table",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "价格表",
"en": "Pricing Table"
},
"aliases": {
"zh": [
"价格表",
"定价表",
"套餐价格",
"价格方案"
],
"en": [
"Pricing Table",
"pricing plans",
"plan pricing",
"pricing tiers"
]
},
"description": {
"zh": "用于展示不同套餐、价格、权益和推荐方案的结构，通常服务于转化决策。",
"en": "A structure for comparing plans, prices, benefits, and recommended choices, usually serving conversion decisions."
},
"prompt": {
"zh": [
"设计一个三列价格表，突出推荐套餐，列出每个套餐的核心权益、限制条件、适合人群和主行动按钮。"
],
"en": [
"Design a three-column pricing table, highlight the recommended plan, and list key benefits for each plan."
]
},
"tip": {
"zh": "价格表要帮用户做选择，推荐项、差异项、限制条件和试用入口要足够清楚。",
"en": "A pricing table should help users choose. Make the recommended plan, differences, and limits clear."
},
"preview": {
"kind": "term-lab",
"variant": "pricing",
"title": {
"zh": "套餐对比",
"en": "Plan comparison"
},
"subtitle": {
"zh": "价格、权益和推荐套餐明确区分",
"en": "Price, benefits, and recommended plan are distinct"
},
"metrics": [
{
"label": {
"zh": "Basic",
"en": "Basic"
},
"value": "¥29",
"tone": "brand"
},
{
"label": {
"zh": "Pro",
"en": "Pro"
},
"value": "¥99",
"tone": "brand"
},
{
"label": {
"zh": "Team",
"en": "Team"
},
"value": "¥199",
"tone": "brand"
}
],
"chips": [
{
"label": {
"zh": "推荐 Pro",
"en": "Pro recommended"
},
"tone": "brand"
},
{
"label": {
"zh": "月/年切换",
"en": "Monthly / yearly"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "feature-grid",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "功能网格",
"en": "Feature Grid"
},
"aliases": {
"zh": [
"功能网格",
"特性网格",
"功能矩阵",
"卖点网格"
],
"en": [
"Feature Grid",
"feature matrix",
"benefit grid",
"feature cards"
]
},
"description": {
"zh": "用网格方式展示产品功能、卖点或能力模块，常见于官网首页和产品介绍页。",
"en": "A grid for product features, benefits, or capability modules, common on landing pages and product pages."
},
"prompt": {
"zh": [
"在首页添加一个 2x3 功能网格，每个功能包含图标、标题、一句解释和对应使用场景，移动端改为单列堆叠。"
],
"en": [
"Add a 2x3 feature grid with an icon, title, and one-sentence explanation for each feature."
]
},
"tip": {
"zh": "功能网格要控制文案长度，并让每张卡表达不同能力，避免六张卡看起来只是在换词重复。",
"en": "Keep copy short in feature grids. Do not turn every card into a mini article."
},
"preview": {
"kind": "term-lab",
"variant": "grid",
"title": {
"zh": "功能网格",
"en": "Feature grid"
},
"subtitle": {
"zh": "三列功能卡片，图标和说明一一对应",
"en": "Three-column feature cards with matched icons and copy"
},
"rows": [
{
"title": {
"zh": "搜索",
"en": "Search"
},
"desc": {
"zh": "快速定位内容",
"en": "Find content fast"
},
"tone": "muted"
},
{
"title": {
"zh": "同步",
"en": "Sync"
},
"desc": {
"zh": "跨设备更新",
"en": "Cross-device update"
},
"tone": "muted"
},
{
"title": {
"zh": "权限",
"en": "Permissions"
},
"desc": {
"zh": "团队协作边界",
"en": "Team boundaries"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "testimonials",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "用户评价",
"en": "Testimonials"
},
"aliases": {
"zh": [
"用户评价",
"客户证言",
"评价墙",
"口碑区"
],
"en": [
"Testimonials",
"customer quotes",
"social proof",
"review wall"
]
},
"description": {
"zh": "展示真实用户反馈、公司背书或案例引用的区域，用来增加信任感。",
"en": "A section for real customer quotes, company proof, or case references, used to build trust."
},
"prompt": {
"zh": [
"添加一个用户评价区域，包含头像、姓名、职位、公司标识、评价内容和具体结果，移动端保持可读的卡片节奏。"
],
"en": [
"Add a testimonials section with avatar, name, role, quote, and company logo."
]
},
"tip": {
"zh": "评价内容要具体，最好能说明结果、场景或前后变化；空泛夸奖会显得像模板。",
"en": "Testimonials should be specific and ideally mention outcomes or context. Generic praise feels templated."
},
"preview": {
"kind": "term-lab",
"variant": "quote",
"title": {
"zh": "用户评价",
"en": "Testimonials"
},
"subtitle": {
"zh": "头像、身份和引用内容保持可信",
"en": "Avatar, role, and quote stay credible"
},
"rows": [
{
"title": {
"zh": "产品经理",
"en": "Product manager"
},
"desc": {
"zh": "这个词库让我们写 prompt 更统一。",
"en": "This library made our prompts consistent."
},
"tone": "brand"
},
{
"title": {
"zh": "前端工程师",
"en": "Frontend engineer"
},
"desc": {
"zh": "预览比单纯定义更好用。",
"en": "Previews beat plain definitions."
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "logo-cloud",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "Logo 墙",
"en": "Logo Cloud"
},
"aliases": {
"zh": [
"Logo 墙",
"客户墙",
"品牌墙",
"合作伙伴 logo"
],
"en": [
"Logo Cloud",
"customer logos",
"brand wall",
"partner logos"
]
},
"description": {
"zh": "集中展示客户、合作伙伴或媒体 Logo 的区域，用轻量方式建立可信度。",
"en": "A section that displays customer, partner, or press logos to create lightweight credibility."
},
"prompt": {
"zh": [
"在首屏下方添加一组客户 logo，使用低饱和灰色、统一尺寸和稳定间距，移动端允许横向滑动或分两行展示。"
],
"en": [
"Add a customer logo cloud below the hero, using muted gray logos with consistent sizing."
]
},
"tip": {
"zh": "Logo 墙要低调，重点是信任背书，不要抢主标题和 CTA；没有真实客户时不要伪造品牌。",
"en": "A logo cloud should be quiet. It supports trust and should not compete with the headline or CTA."
},
"preview": {
"kind": "term-lab",
"variant": "logos",
"title": {
"zh": "集成工具",
"en": "Tool logos"
},
"subtitle": {
"zh": "用低干扰 logo 展示生态可信度",
"en": "Low-distraction logos show ecosystem trust"
},
"chips": [
{
"label": {
"zh": "Figma",
"en": "Figma"
},
"tone": "muted"
},
{
"label": {
"zh": "GitHub",
"en": "GitHub"
},
"tone": "muted"
},
{
"label": {
"zh": "Vercel",
"en": "Vercel"
},
"tone": "muted"
},
{
"label": {
"zh": "Notion",
"en": "Notion"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "stats-section",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "数据指标区",
"en": "Stats Section"
},
"aliases": {
"zh": [
"数据指标区",
"数字区",
"关键数据",
"指标展示"
],
"en": [
"Stats Section",
"metrics section",
"numbers section",
"key stats"
]
},
"description": {
"zh": "用几个关键数字快速传达规模、效率、增长或可信度的页面区域。",
"en": "A page section that uses key numbers to communicate scale, efficiency, growth, or trust quickly."
},
"prompt": {
"zh": [
"添加一个三列数据指标区，展示用户数、节省时间和满意度，并给每个数字补充单位、时间范围和解释标签。"
],
"en": [
"Add a three-column stats section showing users, time saved, and satisfaction."
]
},
"tip": {
"zh": "数字必须有上下文、单位和时间范围。只有大数字没有解释，会显得像装饰。",
"en": "Numbers need context and units. Big numbers without explanation feel decorative."
},
"preview": {
"kind": "term-lab",
"variant": "stats",
"title": {
"zh": "关键数据",
"en": "Key stats"
},
"subtitle": {
"zh": "数字、标签和上下文同时出现",
"en": "Number, label, and context appear together"
},
"metrics": [
{
"label": {
"zh": "词条",
"en": "Terms"
},
"value": "161",
"tone": "brand"
},
{
"label": {
"zh": "路径",
"en": "Paths"
},
"value": "8",
"tone": "brand"
},
{
"label": {
"zh": "复制",
"en": "Copies"
},
"value": "1-click",
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "comparison-table",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "对比表",
"en": "Comparison Table"
},
"aliases": {
"zh": [
"对比表",
"功能对比",
"方案对比",
"对照表"
],
"en": [
"Comparison Table",
"feature comparison",
"comparison matrix",
"plan comparison table"
]
},
"description": {
"zh": "用于横向比较多个方案、套餐或产品能力的表格结构。",
"en": "A table structure for comparing multiple plans, options, or product capabilities side by side."
},
"prompt": {
"zh": [
"创建一个功能对比表，比较免费版、专业版和团队版的限制、权益、推荐人群和关键差异。"
],
"en": [
"Create a feature comparison table for Free, Pro, and Team plans with limits and benefits."
]
},
"tip": {
"zh": "对比表要突出差异和决策点，不要把所有格子都填满相同信息。",
"en": "Comparison tables should highlight differences. Do not fill every cell with identical content."
},
"preview": {
"kind": "term-lab",
"variant": "table",
"title": {
"zh": "方案对比",
"en": "Option comparison"
},
"subtitle": {
"zh": "横向比较功能、限制和适用场景",
"en": "Compare features, limits, and fit"
},
"rows": [
{
"title": {
"zh": "静态展示",
"en": "Static display"
},
"desc": {
"zh": "快，但不能试",
"en": "Fast, not interactive"
},
"tone": "muted"
},
{
"title": {
"zh": "实时预览",
"en": "Live preview"
},
"desc": {
"zh": "可调参数，可复制",
"en": "Adjustable and copyable"
},
"tone": "success"
},
{
"title": {
"zh": "完整组件",
"en": "Full component"
},
"desc": {
"zh": "开发成本更高",
"en": "Higher build cost"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "toolbar",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "工具栏",
"en": "Toolbar"
},
"aliases": {
"zh": [
"工具栏",
"操作栏",
"编辑栏",
"按钮组"
],
"en": [
"Toolbar",
"action bar",
"editor toolbar",
"button group"
]
},
"description": {
"zh": "聚合一组常用操作的横向或垂直控件区域，常见于编辑器、表格和设计工具。",
"en": "A horizontal or vertical control area for common actions, often used in editors, tables, and design tools."
},
"prompt": {
"zh": [
"给富文本编辑器加一个工具栏，包含加粗、斜体、链接、列表和撤销按钮。"
],
"en": [
"Add a toolbar to the rich-text editor with bold, italic, link, list, and undo actions."
]
},
"tip": {
"zh": "工具栏要用图标、分组和 tooltip 降低认知负担，不要把所有按钮铺成一排。",
"en": "Use icons, grouping, and tooltips to reduce toolbar complexity. Do not flatten every action into one row."
},
"preview": {
"kind": "term-lab",
"variant": "toolbar",
"title": {
"zh": "编辑器工具栏",
"en": "Editor toolbar"
},
"subtitle": {
"zh": "常用操作用图标按钮，当前状态可见",
"en": "Icon buttons for common actions with visible state"
},
"chips": [
{
"label": {
"zh": "B",
"en": "B"
},
"tone": "brand"
},
{
"label": {
"zh": "I",
"en": "I"
},
"tone": "muted"
},
{
"label": {
"zh": "链接",
"en": "Link"
},
"tone": "muted"
},
{
"label": {
"zh": "撤销",
"en": "Undo"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "segmented-control",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "分段控制器",
"en": "Segmented Control"
},
"aliases": {
"zh": [
"分段控制器",
"分段选择",
"切换按钮组",
"胶囊切换"
],
"en": [
"Segmented Control",
"segmented tabs",
"toggle group",
"pill switcher"
]
},
"description": {
"zh": "用于在少量互斥选项之间切换的控件，比下拉更直接，比 tabs 更轻量。",
"en": "A control for switching between a small number of mutually exclusive options, more direct than a dropdown and lighter than tabs."
},
"prompt": {
"zh": [
"用分段控制器切换按日、按周、按月查看数据。"
],
"en": [
"Use a segmented control to switch between daily, weekly, and monthly data views."
]
},
"tip": {
"zh": "分段控制器最好控制在 2-5 个选项，选项过多应改用下拉或筛选。",
"en": "Segmented controls work best with 2-5 options. Use a dropdown or filter when options grow."
},
"preview": {
"kind": "term-lab",
"variant": "segments",
"title": {
"zh": "时间范围",
"en": "Time range"
},
"subtitle": {
"zh": "同级视图切换，只允许一个选中",
"en": "Peer view switch with one selected item"
},
"chips": [
{
"label": {
"zh": "日",
"en": "Day"
},
"tone": "muted"
},
{
"label": {
"zh": "周",
"en": "Week"
},
"tone": "brand"
},
{
"label": {
"zh": "月",
"en": "Month"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "slider",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "滑块",
"en": "Slider"
},
"aliases": {
"zh": [
"滑块",
"范围选择",
"拖动条",
"数值滑杆"
],
"en": [
"Slider",
"range slider",
"range input",
"scrubber"
]
},
"description": {
"zh": "通过拖动选择连续或分段数值的控件，适合音量、价格、强度和进度调整。",
"en": "A control for selecting continuous or stepped values by dragging, useful for volume, price, intensity, and progress."
},
"prompt": {
"zh": [
"添加一个价格范围滑块，实时显示最小值和最大值。"
],
"en": [
"Add a price range slider that displays the current minimum and maximum values."
]
},
"tip": {
"zh": "滑块需要显示当前值和边界值，否则用户很难精确控制。",
"en": "Sliders need current value and bounds, otherwise users cannot control them precisely."
},
"preview": {
"kind": "term-lab",
"variant": "slider",
"title": {
"zh": "价格范围",
"en": "Price range"
},
"subtitle": {
"zh": "拖动时同步显示当前值",
"en": "Current value updates while dragging"
},
"metrics": [
{
"label": {
"zh": "最小",
"en": "Min"
},
"value": "¥120",
"tone": "brand"
},
{
"label": {
"zh": "最大",
"en": "Max"
},
"value": "¥860",
"tone": "brand"
}
],
"chips": [
{
"label": {
"zh": "实时反馈",
"en": "Live feedback"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "date-picker",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "日期选择器",
"en": "Date Picker"
},
"aliases": {
"zh": [
"日期选择器",
"日历选择",
"日期范围选择",
"日期控件"
],
"en": [
"Date Picker",
"calendar picker",
"date input",
"date range picker"
]
},
"description": {
"zh": "用于选择日期或日期范围的表单控件，常见于预约、筛选和报表。只选择时间时应使用时间选择器。",
"en": "A form control for selecting dates or date ranges, common in bookings, filters, and reports. Use a time picker when selecting time only."
},
"prompt": {
"zh": [
"添加一个日期范围选择器，支持开始/结束日期、最近 7 天等快捷选项、禁用不可选日期、键盘输入和格式错误提示。"
],
"en": [
"Add a date range picker with start date, end date, and quick presets."
]
},
"tip": {
"zh": "日期选择器关注日期格式、本地化、禁用日期和键盘输入；不要和时间选择器混用。",
"en": "Date pickers focus on date format, localization, disabled days, and keyboard input; do not mix them with time pickers."
},
"preview": {
"kind": "term-lab",
"variant": "date-picker",
"title": {
"zh": "日期范围",
"en": "Date range"
},
"subtitle": {
"zh": "快捷选项、禁用日期和格式错误提示",
"en": "Presets, disabled days, and format errors"
},
"chips": [
{
"label": {
"zh": "最近 7 天",
"en": "Last 7 days"
},
"tone": "brand"
},
{
"label": {
"zh": "本月",
"en": "This month"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "开始",
"en": "Start"
},
"desc": {
"zh": "2026-06-01",
"en": "2026-06-01"
},
"tone": "muted"
},
{
"title": {
"zh": "结束",
"en": "End"
},
"desc": {
"zh": "2026-06-14",
"en": "2026-06-14"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "file-upload",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "文件上传",
"en": "File Upload"
},
"aliases": {
"zh": [
"文件上传",
"上传控件",
"拖拽上传",
"上传区域"
],
"en": [
"File Upload",
"uploader",
"dropzone",
"upload field"
]
},
"description": {
"zh": "让用户选择或拖拽文件的输入模式，需要处理格式限制、进度、成功和失败状态。",
"en": "An input pattern for selecting or dropping files, with type limits, progress, success, and failure states."
},
"prompt": {
"zh": [
"设计一个拖拽上传区域，支持点击选择、图片预览、上传进度、格式/大小限制、失败重试和移除已选文件。"
],
"en": [
"Design a drag-and-drop upload zone with image preview, upload progress, and error messages."
]
},
"tip": {
"zh": "上传控件必须说明文件类型和大小限制，并提供失败后的重试路径。",
"en": "Uploaders must state file type and size limits and provide a retry path after failure."
},
"preview": {
"kind": "term-lab",
"variant": "upload",
"title": {
"zh": "上传图片",
"en": "Upload images"
},
"subtitle": {
"zh": "格式、大小、进度、失败重试都可见",
"en": "Format, size, progress, and retry are visible"
},
"metrics": [
{
"label": {
"zh": "进度",
"en": "Progress"
},
"value": "68%",
"tone": "brand"
}
],
"chips": [
{
"label": {
"zh": "PNG/JPG",
"en": "PNG/JPG"
},
"tone": "muted"
},
{
"label": {
"zh": "最大 5MB",
"en": "Max 5MB"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "hero.png",
"en": "hero.png"
},
"desc": {
"zh": "上传中",
"en": "Uploading"
},
"tone": "brand"
},
{
"title": {
"zh": "large.mov",
"en": "large.mov"
},
"desc": {
"zh": "文件过大",
"en": "Too large"
},
"tone": "danger"
}
]
},
"pattern": null
},
{
"id": "combobox",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "组合框",
"en": "Combobox"
},
"aliases": {
"zh": [
"组合框",
"可搜索下拉",
"自动补全选择器",
"搜索选择"
],
"en": [
"Combobox",
"searchable select",
"autocomplete select",
"typeahead"
]
},
"description": {
"zh": "结合输入搜索和下拉选择的控件，适合选项多但仍需要精确选择的场景。",
"en": "A control that combines text input and dropdown selection, useful when options are numerous but choice must be precise."
},
"prompt": {
"zh": [
"把国家选择器做成可搜索 combobox，输入关键词后过滤选项；支持键盘上下选择、无结果提示、清空已选项和移动端触控。"
],
"en": [
"Turn the country selector into a searchable combobox that filters options as the user types."
]
},
"tip": {
"zh": "Combobox 要处理无结果、键盘选择、清空和已选状态。",
"en": "Comboboxes need no-result, keyboard selection, clear, and selected states."
},
"preview": {
"kind": "term-lab",
"variant": "combobox",
"title": {
"zh": "国家选择",
"en": "Country select"
},
"subtitle": {
"zh": "输入搜索、键盘选择、无结果状态",
"en": "Type to search, keyboard select, empty state"
},
"chips": [
{
"label": {
"zh": "中国",
"en": "China"
},
"tone": "brand"
},
{
"label": {
"zh": "日本",
"en": "Japan"
},
"tone": "muted"
},
{
"label": {
"zh": "新加坡",
"en": "Singapore"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "搜索 ca",
"en": "Search ca"
},
"desc": {
"zh": "Canada / Cambodia",
"en": "Canada / Cambodia"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "masonry-layout",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "瀑布流布局",
"en": "Masonry Layout"
},
"aliases": {
"zh": [
"瀑布流布局",
"masonry",
"不等高网格",
"Pinterest 布局"
],
"en": [
"Masonry Layout",
"masonry grid",
"waterfall layout",
"Pinterest layout"
]
},
"description": {
"zh": "让不同高度的卡片自动填充列空间的布局，适合图片、灵感卡片和内容长度不一致的资料库。",
"en": "A layout where cards with different heights fill column space, useful for image boards, inspiration cards, and uneven content libraries."
},
"prompt": {
"zh": [
"把术语卡片改成瀑布流布局，让不同高度的卡片自然排列并减少空白。"
],
"en": [
"Turn the term cards into a masonry layout so uneven card heights flow naturally and reduce empty gaps."
]
},
"tip": {
"zh": "瀑布流适合浏览探索，不适合严格排序或逐行比较。",
"en": "Masonry is good for browsing and discovery, not strict ordering or row-by-row comparison."
},
"preview": {
"kind": "term-lab",
"variant": "masonry",
"title": {
"zh": "瀑布流卡片",
"en": "Masonry cards"
},
"subtitle": {
"zh": "不同高度自然排列，减少空白",
"en": "Different heights stack naturally"
},
"rows": [
{
"title": {
"zh": "短卡片",
"en": "Short card"
},
"desc": {
"zh": "定义 + 标签",
"en": "Definition + tags"
},
"tone": "muted"
},
{
"title": {
"zh": "长卡片",
"en": "Tall card"
},
"desc": {
"zh": "预览 + prompt + 场景",
"en": "Preview + prompt + scene"
},
"tone": "brand"
},
{
"title": {
"zh": "中卡片",
"en": "Medium card"
},
"desc": {
"zh": "案例说明",
"en": "Example"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "bento-grid",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "Bento 网格",
"en": "Bento Grid"
},
"aliases": {
"zh": [
"Bento 网格",
"便当网格",
"拼贴网格",
"产品能力网格"
],
"en": [
"Bento Grid",
"bento layout",
"feature bento",
"mosaic grid"
]
},
"description": {
"zh": "用不同大小的卡片拼出强节奏的信息网格，常用于展示产品能力、案例或功能亮点。",
"en": "A rhythmic grid of differently sized cards, often used to showcase product capabilities, cases, or feature highlights."
},
"prompt": {
"zh": [
"做一个 bento grid 展示 6 个核心功能，其中主功能占两列，次要功能用小卡片。"
],
"en": [
"Create a bento grid for six core features, with the primary feature spanning two columns and secondary features in smaller cards."
]
},
"tip": {
"zh": "Bento 网格要有明确主次，不要只是随机改变卡片大小。",
"en": "Bento grids need hierarchy. Do not randomly vary card sizes."
},
"preview": {
"kind": "term-lab",
"variant": "bento",
"title": {
"zh": "Bento 功能区",
"en": "Bento feature area"
},
"subtitle": {
"zh": "主功能占大格，次级能力用小格",
"en": "Primary feature gets a large cell"
},
"rows": [
{
"title": {
"zh": "AI Prompt",
"en": "AI Prompt"
},
"desc": {
"zh": "主功能 2 列",
"en": "Primary spans 2 cols"
},
"tone": "brand"
},
{
"title": {
"zh": "预览",
"en": "Preview"
},
"desc": {
"zh": "小格",
"en": "Small cell"
},
"tone": "muted"
},
{
"title": {
"zh": "复制",
"en": "Copy"
},
"desc": {
"zh": "小格",
"en": "Small cell"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "design-token",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "设计 Token",
"en": "Design Token"
},
"aliases": {
"zh": [
"设计 Token",
"设计令牌",
"设计系统变量",
"主题令牌"
],
"en": [
"Design Token",
"design tokens",
"theme token",
"system token"
]
},
"description": {
"zh": "把颜色、字号、间距、圆角、阴影等设计决策命名并系统化的基础单位。",
"en": "Named, systemized design decisions for color, type, spacing, radius, shadow, and similar values."
},
"prompt": {
"zh": [
"请为这个界面建立一套可执行的「设计 Token / Design Token」系统。\n\n角色：你是一名负责设计系统落地的 UI/UX 设计师兼前端工程师，需要把视觉决策转成可复用、可维护的命名变量。\n\n目标：不要只列颜色值，而是建立语义化 token，让后续页面、组件和深浅主题都能复用同一套规则。\n\nToken 范围：至少包含 color、typography、spacing、radius、shadow、border、motion 和 z-index。颜色要区分 brand、surface、text、muted、success、warning、danger；字号要包含标题、正文、说明和数据；间距要形成 4/8 基准的节奏。\n\n命名要求：优先使用语义命名，例如 color.surface.default、color.text.muted、radius.md、space.3、shadow.soft；不要只用 blue-500、gray-100 这种无法表达用途的名字。\n\n输出格式：先说明设计原则，再列 token 表、适用组件、深浅主题映射、CSS 变量示例、Tailwind/前端接入方式和反例边界。"
],
"en": [
"Create an executable Design Token system for this interface.\n\nRole: You are a UI/UX designer and frontend engineer responsible for turning visual decisions into reusable, maintainable named variables.\n\nGoal: Do not only list color values. Build semantic tokens that can support pages, components, and light/dark themes.\n\nToken scope: Include color, typography, spacing, radius, shadow, border, motion, and z-index. Colors should cover brand, surface, text, muted, success, warning, and danger. Type should cover heading, body, caption, and data. Spacing should follow a 4/8-based rhythm.\n\nNaming: Prefer semantic names such as color.surface.default, color.text.muted, radius.md, space.3, and shadow.soft. Avoid only using blue-500 or gray-100 when the purpose is unclear.\n\nReturn: principles, token table, component usage, light/dark mapping, CSS variable examples, frontend integration, and anti-patterns."
]
},
"tip": {
"zh": "Token 要表达语义，比如 primary、surface、muted，而不是只叫 blue-500。",
"en": "Tokens should express meaning, such as primary, surface, muted, not only blue-500."
},
"preview": {
"kind": "term-lab",
"variant": "tokens",
"title": {
"zh": "设计 Token",
"en": "Design tokens"
},
"subtitle": {
"zh": "颜色、圆角、间距和阴影统一命名",
"en": "Color, radius, spacing, and shadow named consistently"
},
"chips": [
{
"label": {
"zh": "primary",
"en": "primary"
},
"tone": "brand"
},
{
"label": {
"zh": "surface",
"en": "surface"
},
"tone": "muted"
},
{
"label": {
"zh": "radius-2",
"en": "radius-2"
},
"tone": "muted"
},
{
"label": {
"zh": "shadow-soft",
"en": "shadow-soft"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "style-prompt",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "风格提示词",
"en": "Style Prompt"
},
"aliases": {
"zh": [
"风格提示词",
"风格指令",
"视觉风格 prompt",
"设计风格描述"
],
"en": [
"Style Prompt",
"style instruction",
"visual style prompt",
"design style prompt"
]
},
"description": {
"zh": "描述界面材料、色彩面积、字体密度、组件边界和禁用项的提示词片段，用来把视觉方向变成可执行约束。",
"en": "A prompt fragment that describes visual tone, material, color, typography, and detail control so AI can produce a steadier direction."
},
"prompt": {
"zh": [
"请为这个界面写一段可直接复制给 AI 的「风格提示词 / Style Prompt」。\n\n角色：你是一名懂产品审美、前端实现和 AI 生成稳定性的设计提示词专家。\n\n目标：把抽象审美词转成可验收的视觉约束，让 AI 不再只输出高饱和渐变、玻璃发光和模板化卡片。\n\n必须包含：适用场景、目标用户、视觉关键词、色彩面积、字体气质、圆角范围、边框/阴影规则、信息密度、状态反馈、动效强度、响应式要求和反例边界。\n\n写法要求：用具体条件替代空泛形容词。例如不要只写“高级感”，要写“浅色 surface、低饱和强调色不超过 10%、8px 圆角、细边框、弱阴影、正文对比度 AA、focus 状态可见”。\n\n输出格式：给出一段完整 style prompt，再拆成颜色、排版、组件、交互、禁用项和验收清单。"
],
"en": [
"Write a copy-ready Style Prompt for this interface.\n\nRole: You are a design prompt expert who understands product aesthetics, frontend implementation, and stable AI generation.\n\nGoal: Turn abstract taste words into inspectable visual constraints so AI does not default to saturated gradients, glowing glass, or templated cards.\n\nMust include: use case, target users, visual keywords, color area, typography tone, radius range, border/shadow rules, information density, state feedback, motion intensity, responsive behavior, and anti-patterns.\n\nWriting rule: Replace vague adjectives with concrete conditions. Instead of only saying premium, specify light surfaces, low-saturation accent under 10%, 8px radius, fine borders, subtle shadows, AA body contrast, and visible focus states.\n\nReturn: one complete style prompt plus sections for color, typography, components, interaction, avoid-rules, and acceptance checklist."
]
},
"tip": {
"zh": "风格提示词要具体到材质、色彩面积、字体密度和禁用项；把抽象审美词改成能截图验收的条件。",
"en": "Style prompts need material, color area, type density, and avoid-rules. Do not only ask for “premium”."
},
"preview": {
"kind": "term-lab",
"variant": "style",
"title": {
"zh": "风格提示词",
"en": "Style prompt"
},
"subtitle": {
"zh": "色彩面积、字体密度和禁用项变成约束",
"en": "Color area, type density, and avoid-rules become constraints"
},
"chips": [
{
"label": {
"zh": "低饱和",
"en": "Muted"
},
"tone": "muted"
},
{
"label": {
"zh": "8px 圆角",
"en": "8px radius"
},
"tone": "muted"
},
{
"label": {
"zh": "无发光",
"en": "No glow"
},
"tone": "danger"
}
],
"rows": [
{
"title": {
"zh": "材料",
"en": "Material"
},
"desc": {
"zh": "浅色 surface + 细边框",
"en": "Light surface + fine border"
},
"tone": "muted"
},
{
"title": {
"zh": "禁用项",
"en": "Avoid"
},
"desc": {
"zh": "大面积渐变和装饰",
"en": "Large gradients and decoration"
},
"tone": "danger"
}
]
},
"pattern": null
},
{
"id": "prompt-template",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "提示词模板",
"en": "Prompt Template"
},
"aliases": {
"zh": [
"提示词模板",
"prompt 模板",
"复用提示词",
"指令模板"
],
"en": [
"Prompt Template",
"reusable prompt",
"instruction template",
"prompt pattern"
]
},
"description": {
"zh": "可复用的提示词框架，把目标、上下文、输入材料、设计约束、输出格式和验收标准固定下来。",
"en": "A reusable prompt structure that usually includes goal, context, constraints, output format, and acceptance criteria."
},
"prompt": {
"zh": [
"把这个 UI 需求整理成 prompt 模板，包含目标、用户场景、内容模块、风格边界、交互状态、响应式和验收标准。",
"为组件生成模板：用途、props、状态、视觉约束、不可做事项、输出代码格式和 QA 清单。"
],
"en": [
"Turn this UI request into a prompt template with goal, content, style, interaction states, responsive behavior, and acceptance criteria."
]
},
"tip": {
"zh": "模板要服务复用，保留可替换变量，别把一次项目里的具体文案写死到所有场景。",
"en": "Templates do not need to be long. They should lock in the constraints people often forget."
},
"preview": {
"kind": "term-lab",
"variant": "prompt",
"title": {
"zh": "Prompt 模板",
"en": "Prompt template"
},
"subtitle": {
"zh": "目标、上下文、边界、输出格式固定下来",
"en": "Goal, context, constraints, and output format"
},
"rows": [
{
"title": {
"zh": "目标",
"en": "Goal"
},
"desc": {
"zh": "要做什么",
"en": "What to build"
},
"tone": "brand"
},
{
"title": {
"zh": "边界",
"en": "Constraints"
},
"desc": {
"zh": "不能改什么",
"en": "What must not change"
},
"tone": "muted"
},
{
"title": {
"zh": "验收",
"en": "Acceptance"
},
"desc": {
"zh": "如何证明完成",
"en": "How to verify"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "copy-ready-prompt",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "可复制提示词",
"en": "Copy-ready Prompt"
},
"aliases": {
"zh": [
"可复制提示词",
"一键复制 prompt",
"复制即用指令",
"即用提示词"
],
"en": [
"Copy-ready Prompt",
"one-click prompt",
"copyable prompt",
"ready-to-use instruction"
]
},
"description": {
"zh": "可以直接复制给 AI 执行的一段完整指令，通常已经写好目标、上下文、边界、输出格式和检查标准。",
"en": "A complete instruction that users can copy directly into an AI tool without understanding the underlying structure."
},
"prompt": {
"zh": [
"为这个术语生成一段复制即用 prompt，包含目标、组件状态、视觉边界、响应式要求和输出格式。",
"把用户当前选择的风格、尺寸和交互项合并成一段可复制指令，不要夹杂解释文字。"
],
"en": [
"Generate a copy-ready prompt for this term with goal, style, component states, and output requirements."
]
},
"tip": {
"zh": "一键复制的内容应该是“指令本体”，页面上的教学解释要留在外面，避免用户复制后还要删。",
"en": "Copy-ready prompts should be short, complete, and executable. Keep explanation separate from instruction."
},
"preview": {
"kind": "term-lab",
"variant": "copy",
"title": {
"zh": "复制即用",
"en": "Copy-ready"
},
"subtitle": {
"zh": "只保留指令本体，不夹教学解释",
"en": "Instruction only, no teaching wrapper"
},
"chips": [
{
"label": {
"zh": "一键复制",
"en": "One-click"
},
"tone": "brand"
},
{
"label": {
"zh": "无外层引号",
"en": "No wrapper"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "输入",
"en": "Input"
},
"desc": {
"zh": "用户选择的状态和风格",
"en": "Selected states and style"
},
"tone": "muted"
},
{
"title": {
"zh": "输出",
"en": "Output"
},
"desc": {
"zh": "完整可执行 prompt",
"en": "Executable prompt"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "live-preview",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "实时预览",
"en": "Live Preview"
},
"aliases": {
"zh": [
"实时预览",
"交互预览",
"live preview",
"即时预览"
],
"en": [
"Live Preview",
"interactive preview",
"instant preview",
"preview canvas"
]
},
"description": {
"zh": "用户改变主题、尺寸、内容、状态或参数后，界面立即更新的预览区域，用来把抽象术语变成可感知结果。",
"en": "A preview area that updates immediately when users adjust content, style, or parameters, central to component labs and prompt tools."
},
"prompt": {
"zh": [
"给这个组件加实时预览，用户切换主题、密度、状态和文案后，预览与复制 prompt 同步更新。",
"实时预览要展示默认、悬停、加载、错误和移动端窄屏状态，而不是只放一张静态图。"
],
"en": [
"Add a live preview so theme and size changes update the preview immediately."
]
},
"tip": {
"zh": "预览越互动，越要处理空状态、重置、复制和降级；否则用户只能看效果，不能把它应用到真实任务里。",
"en": "Live preview should connect to copyable output, otherwise users still need to reconstruct the prompt."
},
"preview": {
"kind": "term-lab",
"variant": "preview",
"title": {
"zh": "实时预览",
"en": "Live preview"
},
"subtitle": {
"zh": "参数变化后，预览和 prompt 同步更新",
"en": "Preview and prompt update together"
},
"metrics": [
{
"label": {
"zh": "状态",
"en": "States"
},
"value": "5",
"tone": "brand"
},
{
"label": {
"zh": "同步",
"en": "Sync"
},
"value": "Live",
"tone": "brand"
}
],
"chips": [
{
"label": {
"zh": "重置",
"en": "Reset"
},
"tone": "muted"
},
{
"label": {
"zh": "复制",
"en": "Copy"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "prompt-iteration",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "提示词迭代",
"en": "Prompt Iteration"
},
"aliases": {
"zh": [
"提示词迭代",
"反复调 prompt",
"提示词微调",
"指令优化"
],
"en": [
"Prompt Iteration",
"prompt refinement",
"prompt tuning",
"instruction iteration"
]
},
"description": {
"zh": "根据 AI 产出或实时预览逐步改写指令，让目标、约束、视觉细节和输出格式越来越贴近真实需求。",
"en": "The process of adjusting goals, constraints, style, and output format based on preview results so AI output moves closer to the need."
},
"prompt": {
"zh": [
"根据当前预览给出三条 prompt 迭代：减少装饰、提高信息密度、补齐移动端状态。",
"对这段 prompt 做一轮微调，只改视觉约束，不改变页面结构和功能范围。"
],
"en": [
"Based on the current preview, give me three more specific prompt iteration directions: more restrained, denser, and more mobile-friendly."
]
},
"tip": {
"zh": "迭代要记录“改了什么”和“为什么改”，一次改太多会失去判断依据。",
"en": "Change one direction at a time during iteration, otherwise you cannot tell which instruction improved or worsened the result."
},
"preview": {
"kind": "term-lab",
"variant": "iteration",
"title": {
"zh": "提示词迭代",
"en": "Prompt iteration"
},
"subtitle": {
"zh": "一次只改一个方向，保留判断依据",
"en": "Change one direction at a time"
},
"rows": [
{
"title": {
"zh": "第 1 轮",
"en": "Pass 1"
},
"desc": {
"zh": "减少装饰",
"en": "Reduce decoration"
},
"tone": "muted"
},
{
"title": {
"zh": "第 2 轮",
"en": "Pass 2"
},
"desc": {
"zh": "提高密度",
"en": "Increase density"
},
"tone": "brand"
},
{
"title": {
"zh": "第 3 轮",
"en": "Pass 3"
},
"desc": {
"zh": "补移动端",
"en": "Add mobile"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "component-spec",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "组件规格",
"en": "Component Spec"
},
"aliases": {
"zh": [
"组件规格",
"组件说明",
"实现规格",
"组件 API 说明"
],
"en": [
"Component Spec",
"component specification",
"implementation spec",
"component contract"
]
},
"description": {
"zh": "面向实现的组件说明，明确用途、输入数据、状态、交互、响应式、无障碍和不可变边界。",
"en": "An implementation description for a component, covering purpose, props, states, interactions, responsive behavior, and accessibility."
},
"prompt": {
"zh": [
"为这个卡片组件写 component spec：props、状态、交互、响应式、无障碍、空数据和错误态。",
"把截图里的筛选器整理成组件规格，说明哪些是受控状态，哪些由父组件传入。"
],
"en": [
"Write a component spec for this card: props, states, interactions, responsive behavior, and accessibility requirements."
]
},
"tip": {
"zh": "复杂组件先写规格再写代码，能明显减少 AI 自行脑补导致的交互偏差。",
"en": "Component specs reduce AI guesswork, especially for complex components or collaborative work."
},
"preview": {
"kind": "term-lab",
"variant": "spec",
"title": {
"zh": "组件规格",
"en": "Component spec"
},
"subtitle": {
"zh": "结构、数据、状态、交互和验收",
"en": "Structure, data, states, interaction, QA"
},
"chips": [
{
"label": {
"zh": "Props",
"en": "Props"
},
"tone": "muted"
},
{
"label": {
"zh": "States",
"en": "States"
},
"tone": "brand"
},
{
"label": {
"zh": "A11y",
"en": "A11y"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "空状态",
"en": "Empty"
},
"desc": {
"zh": "无数据时展示",
"en": "Shown with no data"
},
"tone": "muted"
},
{
"title": {
"zh": "错误态",
"en": "Error"
},
"desc": {
"zh": "可恢复操作",
"en": "Recoverable action"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "acceptance-criteria",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "验收标准",
"en": "Acceptance Criteria"
},
"aliases": {
"zh": [
"验收标准",
"验收条件",
"完成定义",
"检查清单"
],
"en": [
"Acceptance Criteria",
"definition of done",
"done criteria",
"checklist"
]
},
"description": {
"zh": "判断任务是否真正完成的可检查条件，覆盖行为结果、边界状态、响应式、无障碍和视觉稳定性。",
"en": "Concrete conditions for deciding whether a UI or feature is done, usually covering behavior, edge cases, responsiveness, and accessibility."
},
"prompt": {
"zh": [
"为这个 UI 任务写验收标准：桌面、移动端、空状态、加载、错误、键盘操作和无横向滚动。",
"把“优化页面体验”改成可验收清单，每条都能在浏览器里确认通过或失败。"
],
"en": [
"Write acceptance criteria for this UI task covering desktop, mobile, empty, loading, error states, and keyboard operation."
]
},
"tip": {
"zh": "好验收标准要能回答“怎么证明它完成了”，而不是重复需求本身。",
"en": "The more specific the acceptance criteria, the less likely AI is to stop at a static lookalike."
},
"preview": {
"kind": "term-lab",
"variant": "checklist",
"title": {
"zh": "验收清单",
"en": "Acceptance checklist"
},
"subtitle": {
"zh": "每条都能在浏览器里确认通过或失败",
"en": "Each item can pass or fail in browser"
},
"rows": [
{
"title": {
"zh": "移动端无横向滚动",
"en": "No mobile overflow"
},
"desc": {
"zh": "390px 通过",
"en": "Pass at 390px"
},
"tone": "success"
},
{
"title": {
"zh": "键盘可操作",
"en": "Keyboard works"
},
"desc": {
"zh": "Tab / Enter / Esc",
"en": "Tab / Enter / Esc"
},
"tone": "muted"
},
{
"title": {
"zh": "错误态可见",
"en": "Error visible"
},
"desc": {
"zh": "失败原因明确",
"en": "Clear reason"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "minimalism",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "极简风格",
"en": "Minimalism"
},
"aliases": {
"zh": [
"极简",
"极简主义",
"minimal UI",
"少即是多"
],
"en": [
"Minimalism",
"minimal UI",
"less is more"
]
},
"description": {
"zh": "以内容和任务为中心，用极少元素、精准留白、清晰层级和克制色彩建立安静高效的界面秩序。",
"en": "A content-first style that uses fewer elements, precise whitespace, clear hierarchy, and restrained color to create calm, efficient interface order."
},
"prompt": {
"zh": [
"请以「极简主义 / Minimalism」为核心视觉方向重设计这个界面。\n\n角色：你是一名擅长克制设计和产品可用性的 UI/UX 设计师兼前端工程师。\n\n设计理念：少即是多，但不是空。每个元素都必须服务导航、理解、决策或行动，删除只负责装饰的组件。\n\n适用场景：个人工具、知识产品、效率应用、作品集、SaaS 首页、阅读型内容页。数据密集后台也可以使用，但必须通过层级和密度保持扫描效率。\n\n视觉要求：使用大量留白、清晰字号层级、低对比边框和有限色彩；主色只用于主按钮、焦点态和关键状态；避免大面积渐变、装饰插画、重复卡片和无意义图标。\n\n排版要求：标题、正文、辅助信息要有明确比例；文本行长可读，按钮文案直接；不要为了显得高级而让信息变得稀薄。\n\n交互要求：状态反馈轻而明确，hover/focus/disabled/loading/empty/error 都要完整。动效只用于方向和确认，不做漂浮装饰。\n\n输出格式：先给信息架构和删减原则，再给布局、留白、字体、颜色、边框、状态、响应式策略，最后列出需要避免的反例。"
],
"en": [
"Redesign this interface around a \"Minimalism\" visual direction.\n\nRole: You are a UI/UX designer and frontend engineer skilled in restraint, usability, and content-first product design.\n\nPrinciple: Less is more, but not empty. Every element must support navigation, understanding, decision-making, or action. Remove purely decorative pieces.\n\nUse cases: personal tools, knowledge products, productivity apps, portfolios, SaaS landing pages, and reading experiences. Dense dashboards can use it only if hierarchy and scanning remain strong.\n\nVisual requirements: Use generous whitespace, clear type hierarchy, low-contrast borders, and a limited palette. Reserve the accent color for primary actions, focus, and critical states. Avoid large gradients, decorative illustrations, repetitive cards, and meaningless icons.\n\nTypography: Keep headings, body, and supporting text clearly proportioned. Maintain readable line length and direct button copy. Do not make information sparse just to look premium.\n\nInteraction: Keep state feedback subtle but clear. Include hover, focus, disabled, loading, empty, and error states. Motion should guide or confirm, not decorate.\n\nReturn: information architecture, removal principles, layout, whitespace, typography, color, borders, states, responsive behavior, and anti-patterns to avoid."
]
},
"tip": {
"zh": "极简不是少放内容，而是删掉不帮助用户行动的东西；层级、留白和状态必须更精准。",
"en": "Minimalism is not fewer useful details. It removes what does not help action, so hierarchy, spacing, and states must be sharper."
},
"preview": {
"kind": "term-lab",
"variant": "minimal",
"templates": 3,
"title": {
"zh": "极简风格",
"en": "Minimalism"
},
"subtitle": {
"zh": "留白、秩序和低噪声操作路径",
"en": "Whitespace, order, and low-noise actions"
},
"palette": [
"#ffffff",
"#f8fafc",
"#0f172a",
"#94a3b8",
"#35c5ba"
],
"chips": [
{
"label": {
"zh": "留白",
"en": "Whitespace"
},
"tone": "muted"
},
{
"label": {
"zh": "低噪声",
"en": "Low noise"
},
"tone": "muted"
},
{
"label": {
"zh": "清晰动作",
"en": "Clear action"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "brutalism",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "粗野主义",
"en": "Brutalism"
},
"aliases": {
"zh": [
"粗野主义",
"brutalist UI",
"硬边框风格"
],
"en": [
"Brutalism",
"brutalist UI",
"hard-edge UI"
]
},
"description": {
"zh": "用硬边框、强对比、直接排版和裸露结构制造有态度的反精致界面。",
"en": "An attitude-driven anti-polished style using hard borders, strong contrast, direct typography, and exposed structure."
},
"prompt": {
"zh": [
"请以「粗野主义 / Brutalism」为核心视觉方向重设计这个界面。\n\n角色：你是一名懂品牌态度和前端实现的 UI 设计师，擅长把反精致视觉转化为可用界面。\n\n设计理念：粗野主义不是乱做，而是把结构、边界和操作暴露出来，用直接、强烈、略带挑衅的视觉语言建立记忆点。\n\n适用场景：创意作品集、活动页、实验性产品、独立品牌、开发者工具和需要强态度的发布页。不适合严肃金融、医疗和儿童产品。\n\n视觉要求：使用硬边框、锐利对比、黑白底色、少量高冲突强调色、粗体标题和明显网格；允许大字号、错位、粗线和块状按钮。\n\n可用性要求：虽然视觉强烈，但交互目标、层级和阅读顺序必须清楚；按钮和链接要一眼可识别。\n\n交互要求：hover 可以用位移、反色、硬阴影和边框加粗；focus 状态必须高可见。避免柔和玻璃、模糊阴影、过度圆角和装饰噪点。\n\n输出格式：先给品牌态度和信息优先级，再给网格、字体、颜色、边框、阴影、组件状态、响应式和反例。"
],
"en": [
"Redesign this interface around a \"Brutalism\" visual direction.\n\nRole: You are a UI designer and frontend engineer who can turn anti-polished brand attitude into a usable interface.\n\nPrinciple: Brutalism is not random. It exposes structure, boundaries, and actions through direct, high-contrast, slightly confrontational visual language.\n\nUse cases: creative portfolios, campaign pages, experimental products, independent brands, developer tools, and launches that need a strong voice. Avoid it for serious finance, healthcare, and children's products.\n\nVisual requirements: Use hard borders, sharp contrast, black/white surfaces, a small number of high-conflict accents, bold headings, and visible grids. Large type, offsets, heavy rules, and blocky buttons are allowed.\n\nUsability: The interface may be loud, but targets, hierarchy, and reading order must remain clear. Buttons and links must be instantly identifiable.\n\nInteraction: Hover can use offset, inversion, hard shadows, or thicker borders. Focus must be highly visible. Avoid soft glass, blurred shadows, excessive radius, and decorative noise.\n\nReturn: brand attitude, information priority, grid, typography, color, borders, shadows, component states, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "粗野主义可以有攻击性，但不能牺牲可读性；它靠结构和对比，不靠脏乱。",
"en": "Brutalism can be aggressive, but not unreadable. It relies on structure and contrast, not mess."
},
"preview": {
"kind": "term-lab",
"variant": "brutal",
"templates": 3,
"title": {
"zh": "粗野主义",
"en": "Brutalism"
},
"subtitle": {
"zh": "硬边框、强标题、一个强调色",
"en": "Hard borders, strong type, one accent"
},
"palette": [
"#ffffff",
"#0f172a",
"#35c5ba",
"#facc15"
],
"chips": [
{
"label": {
"zh": "硬边框",
"en": "Hard border"
},
"tone": "muted"
},
{
"label": {
"zh": "强对比",
"en": "High contrast"
},
"tone": "muted"
},
{
"label": {
"zh": "慎用",
"en": "Use carefully"
},
"tone": "warning"
}
]
},
"pattern": null
},
{
"id": "glassmorphism",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "玻璃拟态",
"en": "Glassmorphism"
},
"aliases": {
"zh": [
"玻璃拟态",
"毛玻璃风格",
"glass UI",
"透明卡片"
],
"en": [
"Glassmorphism",
"glass UI",
"frosted glass",
"translucent card"
]
},
"description": {
"zh": "通过半透明表面、背景模糊、细边框、柔和高光和层级阴影制造玻璃般的浮层空间。",
"en": "A layered glass-like style using translucent surfaces, background blur, fine borders, soft highlights, and depth shadows."
},
"prompt": {
"zh": [
"请以「玻璃拟态 / Glassmorphism」为核心视觉方向重设计这个界面。\n\n角色：你是一名精通半透明材质、层级和可读性的 UI/UX 设计师兼前端工程师。\n\n设计理念：玻璃拟态的重点是空间层次，而不是把所有容器都调透明。用户应该能感到前景浮在背景之上，同时文字仍然清楚。\n\n适用场景：AI 产品、创意工具、音乐/媒体、个人仪表盘、轻量营销页和需要未来感的界面。不适合高密度表格和低性能移动页面。\n\n视觉要求：使用半透明 surface、backdrop blur、1px 高光边框、柔和投影和低噪声背景；背景要有足够明暗变化，但不能影响正文阅读。\n\n可读性要求：正文不要直接压在复杂背景上；重要信息需要实色或更高不透明度容器；所有对比度要达标。\n\n交互要求：hover 可以提高不透明度、边框亮度或轻微上浮；focus 状态要比玻璃边框更明显。减少移动端模糊层数。\n\n输出格式：先判断哪些层适合玻璃化，再给背景、surface、透明度、模糊、边框、阴影、状态、性能策略和反例。"
],
"en": [
"Redesign this interface around a \"Glassmorphism\" visual direction.\n\nRole: You are a UI/UX designer and frontend engineer skilled in translucent material, depth, and readability.\n\nPrinciple: Glassmorphism is about spatial layering, not making every container transparent. The foreground should feel suspended above the background while text remains clear.\n\nUse cases: AI products, creative tools, music/media, personal dashboards, lightweight landing pages, and futuristic interfaces. Avoid it for dense tables and low-performance mobile pages.\n\nVisual requirements: Use translucent surfaces, backdrop blur, 1px highlight borders, soft shadows, and a low-noise background. The background needs value variation without hurting readability.\n\nReadability: Do not place body text directly on complex imagery. Important information needs a solid or higher-opacity surface. Maintain accessible contrast.\n\nInteraction: Hover can increase opacity, brighten borders, or lift slightly. Focus must be clearer than the glass border. Reduce blur layers on mobile.\n\nReturn: which layers should be glass, background, surfaces, opacity, blur, borders, shadows, states, performance strategy, and anti-patterns."
]
},
"tip": {
"zh": "玻璃拟态最容易翻车在可读性；先保证文字落在足够清晰的 surface 上。",
"en": "Glassmorphism most often fails on readability. Make sure text sits on a clear enough surface first."
},
"preview": {
"kind": "term-lab",
"variant": "glass",
"templates": 3,
"title": {
"zh": "玻璃拟态",
"en": "Glassmorphism"
},
"subtitle": {
"zh": "半透明层、细边框和可读正文",
"en": "Translucent surfaces, fine borders, readable text"
},
"palette": [
"#effdfb",
"#f7edff",
"#ffffff",
"#35c5ba",
"#64748b"
],
"chips": [
{
"label": {
"zh": "半透明",
"en": "Translucent"
},
"tone": "muted"
},
{
"label": {
"zh": "背景模糊",
"en": "Backdrop blur"
},
"tone": "muted"
},
{
"label": {
"zh": "对比度",
"en": "Contrast"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "neumorphism",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "新拟物",
"en": "Neumorphism"
},
"aliases": {
"zh": [
"新拟物",
"软拟物",
"neumorphic UI"
],
"en": [
"Neumorphism",
"soft UI",
"neumorphic UI"
]
},
"description": {
"zh": "用同色系背景、内外阴影和低对比曲面，模拟从界面表面凸起或凹陷的柔软实体。",
"en": "A soft-surface style that uses same-color backgrounds, inner/outer shadows, and low-contrast curves to mimic raised or recessed objects."
},
"prompt": {
"zh": [
"请以「新拟物 / Neumorphism」为核心视觉方向重设计这个界面。\n\n角色：你是一名熟悉可访问性和 CSS 阴影系统的 UI/UX 设计师兼前端工程师。\n\n设计理念：新拟物通过同色系表面和双向阴影表达凸起、凹陷和按压，不是简单给卡片加柔阴影。\n\n适用场景：音乐控制、设置面板、智能家居、轻量工具、个人仪表盘和低压力操作界面。不适合复杂后台、强对比无障碍场景和大量文本阅读。\n\n视觉要求：背景与组件使用相近颜色，通过左上高光和右下阴影形成实体感；圆角柔和，边框极弱；控制阴影强度，避免脏灰。\n\n状态要求：凸起表示可点击，凹陷表示输入或已按下；active 状态应从 raised 过渡到 inset；selected/disabled/error 不只靠阴影区分，需要色彩或文字辅助。\n\n可访问性要求：低对比风格必须补充清晰文字、焦点环和状态标签。不要让按钮边界只靠阴影猜。\n\n输出格式：先给可用范围，再给背景色、阴影 token、凸起/凹陷状态、控件状态、对比度修正、响应式和反例。"
],
"en": [
"Redesign this interface around a \"Neumorphism\" visual direction.\n\nRole: You are a UI/UX designer and frontend engineer familiar with accessibility and CSS shadow systems.\n\nPrinciple: Neumorphism communicates raised, recessed, and pressed states through same-color surfaces and directional shadows. It is not just soft shadows on cards.\n\nUse cases: music controls, settings panels, smart-home controls, lightweight tools, personal dashboards, and low-pressure interactions. Avoid complex admin screens, strict accessibility contexts, and heavy reading.\n\nVisual requirements: Use similar colors for background and components. Create physicality with top-left highlights and bottom-right shadows. Keep radius soft, borders subtle, and shadows clean.\n\nState requirements: Raised means clickable, recessed means input or pressed. Active should move from raised to inset. Selected, disabled, and error states need color or text support, not only shadow.\n\nAccessibility: Add readable text, focus rings, and state labels. Do not make users guess button boundaries from shadows alone.\n\nReturn: fit assessment, background color, shadow tokens, raised/recessed states, component states, contrast fixes, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "新拟物不能只靠阴影表达所有状态；重要状态必须加文字、颜色或焦点环。",
"en": "Neumorphism cannot express every state through shadow alone. Important states need text, color, or focus rings."
},
"preview": {
"kind": "term-lab",
"variant": "neumorphism",
"templates": 2,
"title": {
"zh": "新拟物",
"en": "Neumorphism"
},
"subtitle": {
"zh": "软凸起、内阴影、状态清楚",
"en": "Soft raised surfaces, inset shadows, clear states"
},
"palette": [
"#edf3f1",
"#ffffff",
"#cbd5e1",
"#35c5ba"
],
"chips": [
{
"label": {
"zh": "软阴影",
"en": "Soft shadow"
},
"tone": "muted"
},
{
"label": {
"zh": "按下态",
"en": "Pressed"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "editorial-layout",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "杂志排版",
"en": "Editorial Layout"
},
"aliases": {
"zh": [
"杂志排版",
"编辑版式",
"editorial UI",
"长文版式"
],
"en": [
"Editorial layout",
"magazine layout",
"longform layout"
]
},
"description": {
"zh": "用杂志编辑的方式组织网页内容，通过多栏网格、标题层级、跨栏图片、首字下沉、引文和留白建立阅读节奏。",
"en": "A publishing-inspired layout that uses multi-column grids, headline hierarchy, image crops, drop caps, pull quotes, and whitespace to shape reading rhythm."
},
"prompt": {
"zh": [
"请以「杂志排版 / Editorial Layout」为核心视觉方向重设计这个页面。\n\n角色：你是一位精通编辑设计、排版艺术和前端落地的 UI 设计师，熟悉 Vogue、Kinfolk、Monocle 这类高质量出版物的版式语言。\n\n设计理念：内容至上。所有视觉决策都要服务阅读体验、信息层级和视觉叙事，不要把杂志风做成空洞装饰。\n\n布局要求：使用 2-4 栏模块化网格，建立清晰基线节奏；允许跨栏大图、图片出血、图文错位、边注和窄正文栏；移动端收敛为单栏，但保留阅读进度、章节节奏和重点引文。\n\n字体要求：标题使用有性格的衬线字体，正文使用高可读字体，图注和标签用小号无衬线；建立 56/32/24/18/14/12 的层级感，控制行长在 45-75 字符。\n\n图文关系：加入首字下沉、拉引文、细分隔线、页眉/栏目标签、图注和页码感元素；图片可以黑白或低饱和，裁切要服务内容。\n\n色彩要求：以黑白灰、象牙白或浅米色为主，只使用一个克制强调色。避免高饱和渐变、过度阴影、卡片堆叠和 AI 味装饰。\n\n输出格式：先给信息架构，再给桌面与移动布局策略，然后给颜色、字体、间距、图片裁切、装饰元素、交互细节和需要避免的反例。"
],
"en": [
"Redesign this page around an \"Editorial Layout\" visual direction.\n\nRole: You are a UI designer with strong editorial design, typography, and frontend implementation skills, influenced by high-quality publications such as Vogue, Kinfolk, and Monocle.\n\nPrinciple: Content first. Every design decision must improve reading, hierarchy, and visual storytelling rather than turning magazine style into empty decoration.\n\nLayout: Use a 2-4 column modular grid with a clear baseline rhythm. Support full-bleed or cross-column imagery, offset image-text relationships, marginal notes, and narrow reading columns. On mobile, collapse to one column while preserving reading progress, section rhythm, and key pull quotes.\n\nTypography: Use a characterful serif for headlines, a readable body face, and small sans-serif captions/labels. Build a clear 56/32/24/18/14/12 type scale and keep line length around 45-75 characters.\n\nImage and text: Include drop caps, pull quotes, hairline dividers, section labels, captions, and page-number-like details. Images may be black-and-white or low-saturation, and every crop should support the content.\n\nColor: Work mostly in black, white, gray, ivory, or warm paper tones, with one restrained accent color. Avoid high-saturation gradients, heavy shadows, stacked generic cards, and AI-looking ornament.\n\nReturn: information architecture, desktop and mobile layout strategy, palette, typography, spacing, image treatment, editorial details, interaction notes, and anti-patterns to avoid."
]
},
"tip": {
"zh": "杂志排版适合长文、博客、作品集和品牌故事页；核心不是“做旧”，而是用网格、字体和留白让内容更好读。",
"en": "Good for content pages, blogs, and portfolios; not for repetitive tools."
},
"preview": {
"kind": "term-lab",
"variant": "editorial",
"templates": 2,
"title": {
"zh": "杂志排版",
"en": "Editorial Layout"
},
"subtitle": {
"zh": "多栏网格、跨栏图片和出版物阅读节奏",
"en": "Column grids, cross-column imagery, publishing rhythm"
},
"palette": [
"#fbf7ee",
"#211d19",
"#d8cfc1",
"#8a6b4c",
"#33433f"
],
"chips": [
{
"label": {
"zh": "多栏网格",
"en": "Column grid"
},
"tone": "muted"
},
{
"label": {
"zh": "首字下沉",
"en": "Drop cap"
},
"tone": "muted"
},
{
"label": {
"zh": "出版物感",
"en": "Publishing"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "tone-of-voice",
"category": "typo",
"category_label": {
"zh": "文本与排版",
"en": "Typography"
},
"title": {
"zh": "界面语气",
"en": "Tone of Voice"
},
"aliases": {
"zh": [
"界面语气",
"文案语气",
"产品语气",
"voice and tone"
],
"en": [
"Tone of Voice",
"voice and tone",
"product copy tone",
"interface writing style"
]
},
"description": {
"zh": "界面文案的表达方式，包括正式程度、情绪、行动词和错误提示的说法。",
"en": "The expression style of interface copy, including formality, emotion, action verbs, and error wording."
},
"prompt": {
"zh": [
"把这个界面的 tone of voice 设为清晰、克制、专业朋友式，按钮使用明确动词。"
],
"en": [
"Set the interface tone of voice to clear, restrained, and professionally friendly, with action buttons using direct verbs."
]
},
"tip": {
"zh": "语气要服务操作，不要为了可爱牺牲清晰度。",
"en": "Tone should support action. Do not sacrifice clarity for charm."
},
"preview": {
"kind": "term-lab",
"variant": "tone-of-voice",
"title": {
"zh": "界面语气",
"en": "Tone of voice"
},
"subtitle": {
"zh": "按钮和提示用清楚动词，不写空话",
"en": "Use clear verbs, avoid filler"
},
"chips": [
{
"label": {
"zh": "保存更改",
"en": "Save changes"
},
"tone": "brand"
},
{
"label": {
"zh": "重试上传",
"en": "Retry upload"
},
"tone": "muted"
},
{
"label": {
"zh": "查看原因",
"en": "View reason"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "避免",
"en": "Avoid"
},
"desc": {
"zh": "提交 / 了解更多",
"en": "Submit / Learn more"
},
"tone": "danger"
},
{
"title": {
"zh": "推荐",
"en": "Prefer"
},
"desc": {
"zh": "发布文章 / 导入数据",
"en": "Publish post / Import data"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "microcopy",
"category": "typo",
"category_label": {
"zh": "文本与排版",
"en": "Typography"
},
"title": {
"zh": "微文案",
"en": "Microcopy"
},
"aliases": {
"zh": [
"微文案",
"辅助文案",
"提示文案",
"界面短句"
],
"en": [
"Microcopy",
"helper copy",
"UI copy",
"interface hints"
]
},
"description": {
"zh": "按钮、表单提示、空状态、错误信息和说明文字中的短文本，直接影响用户是否理解下一步。",
"en": "Short text in buttons, helper hints, empty states, errors, and explanations that affects whether users understand the next step."
},
"prompt": {
"zh": [
"为这个上传表单补充 microcopy：文件限制、错误原因、成功反馈和按钮文案。"
],
"en": [
"Add microcopy to this upload form: file limits, error reasons, success feedback, and button labels."
]
},
"tip": {
"zh": "微文案要具体、靠近相关控件，并使用和操作一致的动词。",
"en": "Microcopy should be specific, close to the relevant control, and use verbs consistent with the action."
},
"preview": {
"kind": "term-lab",
"variant": "microcopy",
"title": {
"zh": "微文案",
"en": "Microcopy"
},
"subtitle": {
"zh": "在限制、错误和成功处给方向",
"en": "Guide limits, errors, and success"
},
"rows": [
{
"title": {
"zh": "限制",
"en": "Limit"
},
"desc": {
"zh": "PNG/JPG，最大 5MB",
"en": "PNG/JPG, max 5MB"
},
"tone": "muted"
},
{
"title": {
"zh": "错误",
"en": "Error"
},
"desc": {
"zh": "文件过大，请压缩后重试",
"en": "File too large, compress and retry"
},
"tone": "danger"
},
{
"title": {
"zh": "成功",
"en": "Success"
},
"desc": {
"zh": "已保存到草稿箱",
"en": "Saved to drafts"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "notification-center",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "通知中心",
"en": "Notification Center"
},
"aliases": {
"zh": [
"通知中心",
"消息中心",
"通知列表",
"消息面板"
],
"en": [
"Notification Center",
"message center",
"notification list",
"inbox panel"
]
},
"description": {
"zh": "集中展示系统通知、待办、提醒和操作反馈的区域，适合信息量较大的产品。",
"en": "A centralized area for system notifications, tasks, reminders, and feedback, useful for information-heavy products."
},
"prompt": {
"zh": [
"添加一个通知中心，按未读、系统、评论分组，并支持标记已读。"
],
"en": [
"Add a notification center grouped by unread, system, and comments, with mark-as-read support."
]
},
"tip": {
"zh": "通知中心要有已读/未读、时间、来源和批量处理，不然会变成噪音列表。",
"en": "A notification center needs read state, time, source, and bulk handling, otherwise it becomes noisy."
},
"preview": {
"kind": "term-lab",
"variant": "inbox",
"title": {
"zh": "通知中心",
"en": "Notification center"
},
"subtitle": {
"zh": "未读、系统和评论分组",
"en": "Unread, system, and comments grouped"
},
"metrics": [
{
"label": {
"zh": "未读",
"en": "Unread"
},
"value": "12",
"tone": "brand"
}
],
"rows": [
{
"title": {
"zh": "系统维护",
"en": "Maintenance"
},
"desc": {
"zh": "今天 22:00",
"en": "Today 22:00"
},
"tone": "muted"
},
{
"title": {
"zh": "新评论",
"en": "New comment"
},
"desc": {
"zh": "需要回复",
"en": "Needs reply"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "filter-panel",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "筛选面板",
"en": "Filter Panel"
},
"aliases": {
"zh": [
"筛选面板",
"过滤面板",
"筛选器",
"条件筛选"
],
"en": [
"Filter Panel",
"filters",
"filter sidebar",
"faceted filter"
]
},
"description": {
"zh": "聚合多个筛选条件的区域，常见于资源库、商品列表、表格和搜索结果页。",
"en": "A surface that groups multiple filters, common in libraries, product lists, tables, and search results."
},
"prompt": {
"zh": [
"为资源库添加筛选面板，支持分类、标签、状态、时间范围、结果数量、一键清空和移动端抽屉展示。"
],
"en": [
"Add a filter panel to the resource library with category, tags, status, date range, and clear filters."
]
},
"tip": {
"zh": "筛选面板要显示当前条件、结果数量和清空入口；筛选后没有结果时要给下一步建议。",
"en": "Filter panels should show active filters, result count, and a clear-all action."
},
"preview": {
"kind": "term-lab",
"variant": "filters",
"title": {
"zh": "筛选面板",
"en": "Filter panel"
},
"subtitle": {
"zh": "条件、已选项和清除入口同时可见",
"en": "Conditions, active filters, and clear action"
},
"chips": [
{
"label": {
"zh": "状态: 已发布",
"en": "Status: Published"
},
"tone": "brand"
},
{
"label": {
"zh": "标签: UI",
"en": "Tag: UI"
},
"tone": "muted"
},
{
"label": {
"zh": "清除全部",
"en": "Clear all"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "search-results",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "搜索结果",
"en": "Search Results"
},
"aliases": {
"zh": [
"搜索结果",
"结果列表",
"检索结果",
"搜索页"
],
"en": [
"Search Results",
"result list",
"search page",
"query results"
]
},
"description": {
"zh": "展示用户搜索命中的内容列表，需要处理高亮、排序、空结果和加载状态。",
"en": "A result list for user queries, with highlighting, sorting, empty results, and loading states."
},
"prompt": {
"zh": [
"设计搜索结果页，展示命中关键词高亮、结果数量、排序控件、加载状态、无结果建议和返回全部结果入口。"
],
"en": [
"Design a search results page with keyword highlights, result count, sorting, and no-result suggestions."
]
},
"tip": {
"zh": "搜索结果页最怕只给列表，不解释匹配原因和下一步；无结果状态要能引导用户继续。",
"en": "Search results should explain matches and next steps, not only show a list."
},
"preview": {
"kind": "term-lab",
"variant": "search",
"title": {
"zh": "搜索结果",
"en": "Search results"
},
"subtitle": {
"zh": "关键词、高亮、排序和空结果",
"en": "Query, highlight, sorting, empty results"
},
"rows": [
{
"title": {
"zh": "glossary pattern",
"en": "glossary pattern"
},
"desc": {
"zh": "3 个结果",
"en": "3 results"
},
"tone": "brand"
},
{
"title": {
"zh": "无匹配",
"en": "No match"
},
"desc": {
"zh": "显示改写建议",
"en": "Show query suggestions"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "sort-control",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "排序控件",
"en": "Sort Control"
},
"aliases": {
"zh": [
"排序控件",
"排序选择",
"排序按钮",
"sort"
],
"en": [
"Sort Control",
"sort selector",
"sort menu",
"sorting"
]
},
"description": {
"zh": "让用户按时间、热度、价格、名称或相关性重新排列结果的控件。",
"en": "A control that lets users reorder results by time, popularity, price, name, or relevance."
},
"prompt": {
"zh": [
"给列表添加排序控件，支持按最新、最热、名称和价格排序。"
],
"en": [
"Add a sort control to the list with newest, popular, name, and price options."
]
},
"tip": {
"zh": "排序要说明当前规则，最好和筛选条件放在同一操作区。",
"en": "Sorting should show the current rule and usually sit near filters."
},
"preview": {
"kind": "term-lab",
"variant": "sort",
"title": {
"zh": "排序控件",
"en": "Sort control"
},
"subtitle": {
"zh": "排序字段和当前方向清楚显示",
"en": "Sort field and direction visible"
},
"chips": [
{
"label": {
"zh": "最新",
"en": "Newest"
},
"tone": "brand"
},
{
"label": {
"zh": "最热",
"en": "Popular"
},
"tone": "muted"
},
{
"label": {
"zh": "名称 A-Z",
"en": "Name A-Z"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "calendar-view",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "排期视图",
"en": "Schedule View"
},
"aliases": {
"zh": [
"排期视图",
"日程视图",
"周视图",
"预约视图"
],
"en": [
"Schedule View",
"schedule view",
"week schedule",
"booking view"
]
},
"description": {
"zh": "按日期或时间段展示事件、任务和预约的界面模式，重点是浏览安排，而不是单纯选择日期。",
"en": "A view for browsing events, tasks, and bookings by date or time range. It focuses on schedules, not simply choosing a date."
},
"prompt": {
"zh": [
"做一个排期视图，支持周视图和月视图切换，在日期格中显示事件数量、当前日期、选中日和空闲时段。"
],
"en": [
"Create a schedule view with week/month switching, event counts, today, selected day, and available slots in date cells."
]
},
"tip": {
"zh": "排期视图用于看安排；如果只是填一个日期字段，用日期选择器更合适。",
"en": "Schedule views are for browsing plans; if the task is filling one date field, use a date picker instead."
},
"preview": {
"kind": "term-lab",
"variant": "schedule-view",
"title": {
"zh": "本周排期",
"en": "Weekly schedule"
},
"subtitle": {
"zh": "事件数量、选中日和空闲时段",
"en": "Event count, selected day, and open slots"
},
"chips": [
{
"label": {
"zh": "周",
"en": "Week"
},
"tone": "brand"
},
{
"label": {
"zh": "月",
"en": "Month"
},
"tone": "muted"
},
{
"label": {
"zh": "空闲",
"en": "Open slots"
},
"tone": "success"
}
],
"rows": [
{
"title": {
"zh": "周二",
"en": "Tue"
},
"desc": {
"zh": "3 个事件",
"en": "3 events"
},
"tone": "brand"
},
{
"title": {
"zh": "周四",
"en": "Thu"
},
"desc": {
"zh": "2 段空闲",
"en": "2 open slots"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "kanban-board",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "看板",
"en": "Kanban Board"
},
"aliases": {
"zh": [
"看板",
"任务看板",
"Kanban",
"拖拽列"
],
"en": [
"Kanban Board",
"task board",
"kanban",
"drag columns"
]
},
"description": {
"zh": "按状态列组织卡片的任务管理界面，常用于项目、销售线索和内容流程。",
"en": "A task interface that organizes cards by status columns, often used for projects, leads, and content workflows."
},
"prompt": {
"zh": [
"做一个看板，包含待办、进行中、审核、完成四列，卡片可拖拽改变状态，并提供键盘可用的替代操作。"
],
"en": [
"Create a kanban board with To do, In progress, Review, and Done columns, with draggable cards."
]
},
"tip": {
"zh": "看板要限制列宽、卡片密度和空列状态；拖拽不是唯一入口，键盘和按钮操作也要可用。",
"en": "Kanban boards need controlled column width and card density to stay scannable."
},
"preview": {
"kind": "term-lab",
"variant": "kanban",
"title": {
"zh": "任务看板",
"en": "Kanban board"
},
"subtitle": {
"zh": "列、任务卡、拖拽占位和状态",
"en": "Columns, cards, placeholder, and status"
},
"rows": [
{
"title": {
"zh": "待处理",
"en": "Todo"
},
"desc": {
"zh": "3 张卡片",
"en": "3 cards"
},
"tone": "muted"
},
{
"title": {
"zh": "进行中",
"en": "Doing"
},
"desc": {
"zh": "2 张卡片",
"en": "2 cards"
},
"tone": "brand"
},
{
"title": {
"zh": "完成",
"en": "Done"
},
"desc": {
"zh": "8 张卡片",
"en": "8 cards"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "tree-view",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "树形视图",
"en": "Tree View"
},
"aliases": {
"zh": [
"树形视图",
"目录树",
"层级列表",
"文件树"
],
"en": [
"Tree View",
"directory tree",
"hierarchical list",
"file tree"
]
},
"description": {
"zh": "展示父子层级关系的列表模式，常见于文件管理、文档目录和分类管理。",
"en": "A list pattern for parent-child hierarchy, common in file managers, docs navigation, and taxonomy tools."
},
"prompt": {
"zh": [
"添加一个树形视图，支持展开/折叠节点、当前项高亮和搜索过滤。"
],
"en": [
"Add a tree view with expand/collapse nodes, active item highlight, and search filtering."
]
},
"tip": {
"zh": "树形视图要控制层级深度，太深时需要搜索和路径面包屑。",
"en": "Tree views need depth control. Add search and breadcrumbs when hierarchy gets deep."
},
"preview": {
"kind": "term-lab",
"variant": "tree",
"title": {
"zh": "文件树",
"en": "File tree"
},
"subtitle": {
"zh": "展开、折叠、当前项和搜索过滤",
"en": "Expand, collapse, current item, search filter"
},
"rows": [
{
"title": {
"zh": "src/app",
"en": "src/app"
},
"desc": {
"zh": "已展开",
"en": "Expanded"
},
"tone": "brand"
},
{
"title": {
"zh": "glossary",
"en": "glossary"
},
"desc": {
"zh": "当前目录",
"en": "Current folder"
},
"tone": "muted"
},
{
"title": {
"zh": "terms.json",
"en": "terms.json"
},
"desc": {
"zh": "词条数据",
"en": "Term data"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "avatar-group",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "头像组",
"en": "Avatar Group"
},
"aliases": {
"zh": [
"头像组",
"多人头像组",
"重叠头像",
"团队头像"
],
"en": [
"Avatar Group",
"grouped avatars",
"stacked avatars",
"team avatars"
]
},
"description": {
"zh": "用一组头像表示参与者、成员或协作者，常搭配剩余人数计数。",
"en": "A group of avatars representing participants, members, or collaborators, often with an overflow count."
},
"prompt": {
"zh": [
"在项目卡片上显示头像组，最多展示 4 个成员，多余人数用 +N 表示。"
],
"en": [
"Show an avatar group on the project card, up to four members, with +N for overflow."
]
},
"tip": {
"zh": "头像组要有可访问标签，不能只靠图片让用户猜成员身份。",
"en": "Avatar groups need accessible labels. Do not rely on images alone."
},
"preview": {
"kind": "term-lab",
"variant": "avatars",
"title": {
"zh": "协作者",
"en": "Collaborators"
},
"subtitle": {
"zh": "最多显示 4 人，多余人数用 +N",
"en": "Show up to 4, overflow as +N"
},
"chips": [
{
"label": {
"zh": "AL",
"en": "AL"
},
"tone": "brand"
},
{
"label": {
"zh": "LC",
"en": "LC"
},
"tone": "muted"
},
{
"label": {
"zh": "MS",
"en": "MS"
},
"tone": "muted"
},
{
"label": {
"zh": "+7",
"en": "+7"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "context-menu",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "上下文菜单",
"en": "Context Menu"
},
"aliases": {
"zh": [
"上下文菜单",
"右键菜单",
"更多操作菜单",
"快捷菜单"
],
"en": [
"Context Menu",
"right-click menu",
"more actions menu",
"quick menu"
]
},
"description": {
"zh": "根据当前对象或区域展示相关操作的菜单，常用于列表、卡片、编辑器和文件管理。",
"en": "A menu that shows actions related to the current object or area, common in lists, cards, editors, and file managers."
},
"prompt": {
"zh": [
"给资源卡片添加上下文菜单，包含复制链接、重命名、移动和删除。"
],
"en": [
"Add a context menu to resource cards with copy link, rename, move, and delete."
]
},
"tip": {
"zh": "上下文菜单里的危险操作要和普通操作分组，并保留键盘访问。",
"en": "Group destructive actions away from normal actions and keep keyboard access."
},
"preview": {
"kind": "term-lab",
"variant": "menu",
"title": {
"zh": "资源菜单",
"en": "Resource menu"
},
"subtitle": {
"zh": "右键或更多按钮打开快捷操作",
"en": "Right-click or more button opens actions"
},
"rows": [
{
"title": {
"zh": "复制链接",
"en": "Copy link"
},
"desc": {
"zh": "不离开页面",
"en": "Stay on page"
},
"tone": "muted"
},
{
"title": {
"zh": "重命名",
"en": "Rename"
},
"desc": {
"zh": "打开内联输入",
"en": "Open inline input"
},
"tone": "muted"
},
{
"title": {
"zh": "删除",
"en": "Delete"
},
"desc": {
"zh": "危险操作确认",
"en": "Confirm danger"
},
"tone": "danger"
}
]
},
"pattern": null
},
{
"id": "mega-menu",
"category": "nav",
"category_label": {
"zh": "导航",
"en": "Navigation"
},
"title": {
"zh": "大型菜单",
"en": "Mega Menu"
},
"aliases": {
"zh": [
"大型菜单",
"巨型菜单",
"导航大菜单",
"mega menu"
],
"en": [
"Mega Menu",
"large nav menu",
"navigation panel",
"mega dropdown"
]
},
"description": {
"zh": "在导航中展示多列链接、分类和推荐内容的大型下拉菜单。",
"en": "A large dropdown in navigation that shows multi-column links, categories, and featured content."
},
"prompt": {
"zh": [
"为产品导航添加 mega menu，按解决方案、资源、公司三组展示链接；支持键盘导航、延迟关闭、移动端折叠成分组抽屉。"
],
"en": [
"Add a mega menu to product navigation with Solutions, Resources, and Company groups."
]
},
"tip": {
"zh": "Mega menu 要有清晰分组和延迟关闭，避免用户刚移动鼠标就丢失菜单。",
"en": "Mega menus need clear grouping and forgiving hover behavior."
},
"preview": {
"kind": "term-lab",
"variant": "mega",
"title": {
"zh": "产品导航",
"en": "Product navigation"
},
"subtitle": {
"zh": "多列链接和移动端分组抽屉",
"en": "Multi-column links and mobile grouped drawer"
},
"rows": [
{
"title": {
"zh": "解决方案",
"en": "Solutions"
},
"desc": {
"zh": "团队 / 内容 / 数据",
"en": "Team / Content / Data"
},
"tone": "brand"
},
{
"title": {
"zh": "资源",
"en": "Resources"
},
"desc": {
"zh": "文档 / 案例 / 博客",
"en": "Docs / Cases / Blog"
},
"tone": "muted"
},
{
"title": {
"zh": "公司",
"en": "Company"
},
"desc": {
"zh": "关于 / 招聘",
"en": "About / Careers"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "faq-section",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "FAQ 区块",
"en": "FAQ Section"
},
"aliases": {
"zh": [
"FAQ 区块",
"常见问题",
"问答区",
"问题列表"
],
"en": [
"FAQ Section",
"frequently asked questions",
"Q&A section",
"question list"
]
},
"description": {
"zh": "用问答形式解释价格、功能、限制或流程的页面区域。",
"en": "A page section that explains pricing, features, limits, or process through questions and answers."
},
"prompt": {
"zh": [
"在定价页底部添加 FAQ 区块，用 accordion 展开每个问题答案。"
],
"en": [
"Add an FAQ section at the bottom of the pricing page, using accordion rows for answers."
]
},
"tip": {
"zh": "FAQ 应该回答真实阻碍转化的问题，不要放营销口号。",
"en": "FAQ should answer real conversion blockers, not repeat marketing claims."
},
"preview": {
"kind": "term-lab",
"variant": "faq",
"title": {
"zh": "FAQ 手风琴",
"en": "FAQ accordion"
},
"subtitle": {
"zh": "问题折叠，当前项展开",
"en": "Questions collapsed, current item open"
},
"rows": [
{
"title": {
"zh": "可以退款吗？",
"en": "Can I refund?"
},
"desc": {
"zh": "展开显示答案",
"en": "Expanded answer"
},
"tone": "brand"
},
{
"title": {
"zh": "支持团队吗？",
"en": "Team support?"
},
"desc": {
"zh": "折叠状态",
"en": "Collapsed"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "newsletter-signup",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "订阅表单",
"en": "Newsletter Signup"
},
"aliases": {
"zh": [
"订阅表单",
"邮件订阅",
"newsletter",
"订阅区"
],
"en": [
"Newsletter Signup",
"email signup",
"subscription form",
"newsletter block"
]
},
"description": {
"zh": "收集用户邮箱或订阅意愿的页面模块，通常包含价值说明、输入框和提交反馈。",
"en": "A page module for collecting email or subscription intent, usually with value copy, input, and submit feedback."
},
"prompt": {
"zh": [
"添加一个 newsletter signup 区块，说明订阅价值，包含邮箱输入和成功反馈。"
],
"en": [
"Add a newsletter signup block with value copy, email input, and success feedback."
]
},
"tip": {
"zh": "订阅表单要明确用户会收到什么、频率如何，以及如何取消。",
"en": "Newsletter signup should explain what users receive, how often, and how to unsubscribe."
},
"preview": {
"kind": "term-lab",
"variant": "signup",
"title": {
"zh": "订阅更新",
"en": "Subscribe"
},
"subtitle": {
"zh": "价值说明、邮箱输入、成功反馈",
"en": "Value, email input, success feedback"
},
"chips": [
{
"label": {
"zh": "每周一次",
"en": "Weekly"
},
"tone": "muted"
},
{
"label": {
"zh": "无垃圾邮件",
"en": "No spam"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "邮箱",
"en": "Email"
},
"desc": {
"zh": "hello@example.com",
"en": "hello@example.com"
},
"tone": "muted"
},
{
"title": {
"zh": "状态",
"en": "State"
},
"desc": {
"zh": "订阅成功 toast",
"en": "Success toast"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "case-study-card",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "案例卡片",
"en": "Case Study Card"
},
"aliases": {
"zh": [
"案例卡片",
"客户案例",
"项目案例",
"作品卡片"
],
"en": [
"Case Study Card",
"customer story card",
"project case card",
"portfolio card"
]
},
"description": {
"zh": "用卡片展示案例背景、结果、行业和关键指标，帮助用户快速判断相关性。",
"en": "A card that shows case context, outcome, industry, and key metrics so users can judge relevance quickly."
},
"prompt": {
"zh": [
"设计案例卡片，包含行业标签、客户名称、结果指标和查看详情按钮。"
],
"en": [
"Design a case study card with industry tag, customer name, outcome metric, and view details action."
]
},
"tip": {
"zh": "案例卡片要突出结果，不要只放封面图和标题。",
"en": "Case cards should highlight outcomes, not only image and title."
},
"preview": {
"kind": "term-lab",
"variant": "case",
"title": {
"zh": "客户案例",
"en": "Case study"
},
"subtitle": {
"zh": "行业、客户、结果指标和入口",
"en": "Industry, customer, result, and CTA"
},
"metrics": [
{
"label": {
"zh": "转化",
"en": "Conversion"
},
"value": "+32%",
"tone": "brand"
},
{
"label": {
"zh": "周期",
"en": "Cycle"
},
"value": "-18%",
"tone": "brand"
}
],
"chips": [
{
"label": {
"zh": "SaaS",
"en": "SaaS"
},
"tone": "muted"
},
{
"label": {
"zh": "查看详情",
"en": "View case"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "integration-grid",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "集成网格",
"en": "Integration Grid"
},
"aliases": {
"zh": [
"集成网格",
"集成列表",
"应用连接",
"工具集成"
],
"en": [
"Integration Grid",
"integration list",
"app integrations",
"tool connections"
]
},
"description": {
"zh": "展示产品可连接工具、平台或 API 的网格模块。",
"en": "A grid module showing tools, platforms, or APIs that a product connects with."
},
"prompt": {
"zh": [
"添加一个集成网格，展示 12 个常用工具 logo、名称和连接状态。"
],
"en": [
"Add an integration grid with 12 tool logos, names, and connection states."
]
},
"tip": {
"zh": "集成网格要支持搜索或分类，否则 logo 多了之后很难找。",
"en": "Integration grids need search or categories once there are many logos."
},
"preview": {
"kind": "term-lab",
"variant": "integrations",
"title": {
"zh": "集成状态",
"en": "Integration status"
},
"subtitle": {
"zh": "工具 logo、名称和连接状态",
"en": "Tool logo, name, and connection status"
},
"rows": [
{
"title": {
"zh": "GitHub",
"en": "GitHub"
},
"desc": {
"zh": "已连接",
"en": "Connected"
},
"tone": "success"
},
{
"title": {
"zh": "Figma",
"en": "Figma"
},
"desc": {
"zh": "需要授权",
"en": "Needs auth"
},
"tone": "warning"
},
{
"title": {
"zh": "Slack",
"en": "Slack"
},
"desc": {
"zh": "未连接",
"en": "Disconnected"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "changelog",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "更新日志",
"en": "Changelog"
},
"aliases": {
"zh": [
"更新日志",
"版本记录",
"产品更新",
"发布记录"
],
"en": [
"Changelog",
"release notes",
"product updates",
"version history"
]
},
"description": {
"zh": "按时间记录产品版本、功能变更、修复和改进的内容结构。",
"en": "A content structure that records product releases, feature changes, fixes, and improvements over time."
},
"prompt": {
"zh": [
"做一个更新日志页面，按月份分组展示新增、优化和修复。"
],
"en": [
"Create a changelog page grouped by month with added, improved, and fixed items."
]
},
"tip": {
"zh": "更新日志要让用户快速知道变化是否和自己有关。",
"en": "Changelogs should help users quickly know whether changes matter to them."
},
"preview": {
"kind": "term-lab",
"variant": "changelog",
"title": {
"zh": "更新日志",
"en": "Changelog"
},
"subtitle": {
"zh": "按月份分组新增、优化和修复",
"en": "Grouped by month: added, improved, fixed"
},
"rows": [
{
"title": {
"zh": "2026.06",
"en": "2026.06"
},
"desc": {
"zh": "新增交互预览",
"en": "Added interactive previews"
},
"tone": "brand"
},
{
"title": {
"zh": "2026.05",
"en": "2026.05"
},
"desc": {
"zh": "修复移动端溢出",
"en": "Fixed mobile overflow"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "docs-layout",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "文档布局",
"en": "Docs Layout"
},
"aliases": {
"zh": [
"文档布局",
"文档站",
"知识库布局",
"docs"
],
"en": [
"Docs Layout",
"documentation layout",
"knowledge base layout",
"docs site"
]
},
"description": {
"zh": "面向长文档和知识库的布局，通常包含侧栏目录、正文、页内锚点和下一篇导航。",
"en": "A layout for documentation and knowledge bases, usually with sidebar nav, content, anchors, and next-page navigation."
},
"prompt": {
"zh": [
"设计一个 docs layout：左侧目录、中间正文、右侧页内锚点、底部上一篇/下一篇，并处理移动端目录折叠。"
],
"en": [
"Design a docs layout with sidebar nav, main content, right-side anchors, and previous/next links."
]
},
"tip": {
"zh": "文档布局最重要的是可扫读、可定位和可继续阅读，不要做成普通博客页。",
"en": "Docs layout is about scanning and wayfinding, not a generic blog page."
},
"preview": {
"kind": "term-lab",
"variant": "docs",
"title": {
"zh": "文档布局",
"en": "Docs layout"
},
"subtitle": {
"zh": "左侧目录、正文、右侧锚点",
"en": "Sidebar, article, right anchors"
},
"rows": [
{
"title": {
"zh": "目录",
"en": "Nav"
},
"desc": {
"zh": "组件 / 样式 / API",
"en": "Components / Style / API"
},
"tone": "muted"
},
{
"title": {
"zh": "正文",
"en": "Article"
},
"desc": {
"zh": "可读宽度",
"en": "Readable width"
},
"tone": "brand"
},
{
"title": {
"zh": "锚点",
"en": "Anchors"
},
"desc": {
"zh": "当前小节高亮",
"en": "Current section highlighted"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "settings-page",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "设置页",
"en": "Settings Page"
},
"aliases": {
"zh": [
"设置页",
"偏好设置",
"配置页",
"账户设置"
],
"en": [
"Settings Page",
"preferences",
"configuration page",
"account settings"
]
},
"description": {
"zh": "组织用户偏好、账户、通知、隐私和集成配置的页面。",
"en": "A page for user preferences, account, notifications, privacy, and integration configuration."
},
"prompt": {
"zh": [
"设计一个设置页，左侧分组导航，右侧展示账户、通知、隐私和集成设置；危险操作单独分区，保存成功/失败反馈明确。"
],
"en": [
"Design a settings page with grouped side navigation and account, notifications, privacy, and integrations on the right."
]
},
"tip": {
"zh": "设置页要把高频和危险设置分开，保存反馈必须明确。",
"en": "Settings pages should separate frequent and dangerous settings, with clear save feedback."
},
"preview": {
"kind": "term-lab",
"variant": "settings",
"title": {
"zh": "设置页",
"en": "Settings page"
},
"subtitle": {
"zh": "分组导航、保存反馈和危险区",
"en": "Grouped nav, save feedback, danger zone"
},
"rows": [
{
"title": {
"zh": "账户",
"en": "Account"
},
"desc": {
"zh": "名称、头像、邮箱",
"en": "Name, avatar, email"
},
"tone": "brand"
},
{
"title": {
"zh": "通知",
"en": "Notifications"
},
"desc": {
"zh": "邮件和站内提醒",
"en": "Email and in-app"
},
"tone": "muted"
},
{
"title": {
"zh": "危险操作",
"en": "Danger zone"
},
"desc": {
"zh": "删除账户需确认",
"en": "Delete requires confirm"
},
"tone": "danger"
}
]
},
"pattern": null
},
{
"id": "dashboard-card",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "仪表盘卡片",
"en": "Dashboard Card"
},
"aliases": {
"zh": [
"仪表盘卡片",
"数据卡片",
"概览卡片",
"dashboard card"
],
"en": [
"Dashboard Card",
"metric card",
"overview card",
"dashboard widget"
]
},
"description": {
"zh": "在仪表盘中承载指标、趋势、状态或快捷入口的卡片。",
"en": "A card in dashboards for metrics, trends, status, or quick entry points."
},
"prompt": {
"zh": [
"设计一组 dashboard cards，展示收入、转化率、活跃用户和待处理事项，并标明时间范围、趋势和异常状态。"
],
"en": [
"Design dashboard cards for revenue, conversion rate, active users, and pending tasks."
]
},
"tip": {
"zh": "仪表盘卡片要明确时间范围、变化趋势和数据状态，否则数字没有意义。",
"en": "Dashboard cards need timeframe and trend context, otherwise numbers lack meaning."
},
"preview": {
"kind": "term-lab",
"variant": "dashboard-card",
"title": {
"zh": "指标卡片",
"en": "Dashboard card"
},
"subtitle": {
"zh": "标题、数值、趋势和来源时间",
"en": "Title, value, trend, and source time"
},
"metrics": [
{
"label": {
"zh": "活跃用户",
"en": "Active users"
},
"value": "12.8k",
"tone": "brand"
},
{
"label": {
"zh": "趋势",
"en": "Trend"
},
"value": "+8.4%",
"tone": "success"
}
],
"chips": [
{
"label": {
"zh": "5 分钟前",
"en": "5 min ago"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "kpi-card",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "KPI 卡片",
"en": "KPI Card"
},
"aliases": {
"zh": [
"KPI 卡片",
"关键指标卡",
"指标卡",
"数据指标"
],
"en": [
"KPI Card",
"key metric card",
"metric tile",
"number card"
]
},
"description": {
"zh": "突出展示一个关键指标、变化幅度和上下文的紧凑卡片。",
"en": "A compact card for one key metric, its change, and context."
},
"prompt": {
"zh": [
"添加 KPI 卡片，包含指标名称、当前数值、环比变化、小型趋势图、时间范围和异常提醒。"
],
"en": [
"Add KPI cards with metric name, current value, period change, and a tiny trend chart."
]
},
"tip": {
"zh": "KPI 卡片要避免只放大数字，必须说明变化方向、周期和该指标是否需要行动。",
"en": "KPI cards should not only enlarge numbers. Show direction and period."
},
"preview": {
"kind": "term-lab",
"variant": "kpi",
"title": {
"zh": "KPI 卡片",
"en": "KPI card"
},
"subtitle": {
"zh": "主指标、对比值和异常状态",
"en": "Main metric, comparison, anomaly state"
},
"metrics": [
{
"label": {
"zh": "收入",
"en": "Revenue"
},
"value": "¥82k",
"tone": "brand"
},
{
"label": {
"zh": "同比",
"en": "YoY"
},
"value": "+12%",
"tone": "success"
}
],
"rows": [
{
"title": {
"zh": "异常提示",
"en": "Anomaly"
},
"desc": {
"zh": "退款率升高",
"en": "Refund rate up"
},
"tone": "warning"
}
]
},
"pattern": null
},
{
"id": "chart",
"category": "media",
"category_label": {
"zh": "媒体",
"en": "Media"
},
"title": {
"zh": "图表",
"en": "Chart"
},
"aliases": {
"zh": [
"图表",
"数据可视化",
"折线图",
"柱状图"
],
"en": [
"Chart",
"data visualization",
"line chart",
"bar chart"
]
},
"description": {
"zh": "把数据转成可视化图形的模式，用于展示趋势、分布、对比和占比。",
"en": "A pattern that turns data into visual forms for trends, distribution, comparison, and proportion."
},
"prompt": {
"zh": [
"添加一个折线图展示过去 30 天访问量，支持悬停 tooltip、空数据、加载状态、移动端横向空间和数据来源说明。"
],
"en": [
"Add a line chart for visits over the last 30 days with hover tooltips."
]
},
"tip": {
"zh": "图表要先说明要回答的问题，再选图形类型；别让图表只变成装饰性的彩色线条。",
"en": "Charts should start from the question being answered, then choose the visual type."
},
"preview": {
"kind": "term-lab",
"variant": "chart",
"title": {
"zh": "趋势图",
"en": "Trend chart"
},
"subtitle": {
"zh": "坐标、图例、空数据和异常值",
"en": "Axis, legend, empty data, outliers"
},
"metrics": [
{
"label": {
"zh": "峰值",
"en": "Peak"
},
"value": "84",
"tone": "brand"
},
{
"label": {
"zh": "异常",
"en": "Outlier"
},
"value": "1",
"tone": "warning"
}
],
"chips": [
{
"label": {
"zh": "7 日",
"en": "7 days"
},
"tone": "brand"
},
{
"label": {
"zh": "30 日",
"en": "30 days"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "map-view",
"category": "media",
"category_label": {
"zh": "媒体",
"en": "Media"
},
"title": {
"zh": "地图视图",
"en": "Map View"
},
"aliases": {
"zh": [
"地图视图",
"地图模式",
"位置地图",
"地理视图"
],
"en": [
"Map View",
"map interface",
"location map",
"geo view"
]
},
"description": {
"zh": "用地图展示位置、区域、路线或空间关系的界面模式。",
"en": "An interface pattern for locations, areas, routes, or spatial relationships."
},
"prompt": {
"zh": [
"添加地图视图，显示门店标记、当前定位和列表联动。"
],
"en": [
"Add a map view with store markers, current location, and linked list selection."
]
},
"tip": {
"zh": "地图视图要有列表替代和加载失败处理，不能只依赖地图瓦片。",
"en": "Map views need a list alternative and failure handling, not only map tiles."
},
"preview": {
"kind": "term-lab",
"variant": "map",
"title": {
"zh": "门店地图",
"en": "Store map"
},
"subtitle": {
"zh": "地图标记和列表联动",
"en": "Markers linked with list"
},
"metrics": [
{
"label": {
"zh": "门店",
"en": "Stores"
},
"value": "18",
"tone": "brand"
}
],
"rows": [
{
"title": {
"zh": "上海静安",
"en": "Shanghai Jing’an"
},
"desc": {
"zh": "当前选中",
"en": "Selected"
},
"tone": "brand"
},
{
"title": {
"zh": "杭州西湖",
"en": "Hangzhou West Lake"
},
"desc": {
"zh": "营业中",
"en": "Open"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "prompt-chaining",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "提示词链",
"en": "Prompt Chaining"
},
"aliases": {
"zh": [
"提示词链",
"链式 prompt",
"多步提示词",
"prompt chaining"
],
"en": [
"Prompt Chaining",
"chained prompts",
"multi-step prompt",
"prompt sequence"
]
},
"description": {
"zh": "把复杂任务拆成连续的多段提示词，每一步只解决一个问题，并把产出作为下一步输入。",
"en": "Breaking a complex task into a sequence of prompts where each output feeds the next step."
},
"prompt": {
"zh": [
"把这个页面生成任务拆成提示词链：信息架构、组件规格、视觉约束、代码实现、视觉验收。",
"为重做 glossary 页面设计一条 prompt chain，每一步都有明确输入、输出和验收方式。"
],
"en": [
"Split this page generation task into a prompt chain: IA, component spec, visual style, code implementation, and QA."
]
},
"tip": {
"zh": "提示词链适合大任务，但每一步要足够窄；不要让一个 prompt 同时做调研、设计、编码和验收。",
"en": "Prompt chaining fits complex tasks, but each step needs a clear output format."
},
"preview": {
"kind": "term-lab",
"variant": "chain",
"title": {
"zh": "Prompt 链路",
"en": "Prompt chain"
},
"subtitle": {
"zh": "信息架构、规格、视觉、实现和 QA 分步执行",
"en": "IA, spec, visual, build, QA as steps"
},
"rows": [
{
"title": {
"zh": "1 IA",
"en": "1 IA"
},
"desc": {
"zh": "页面结构",
"en": "Page structure"
},
"tone": "muted"
},
{
"title": {
"zh": "2 Spec",
"en": "2 Spec"
},
"desc": {
"zh": "组件规格",
"en": "Component spec"
},
"tone": "muted"
},
{
"title": {
"zh": "3 QA",
"en": "3 QA"
},
"desc": {
"zh": "浏览器验收",
"en": "Browser QA"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "design-brief",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "设计简报",
"en": "Design Brief"
},
"aliases": {
"zh": [
"设计简报",
"设计需求",
"brief",
"项目简报"
],
"en": [
"Design Brief",
"creative brief",
"project brief",
"design request"
]
},
"description": {
"zh": "给设计或开发前置的需求说明，写清用户、场景、页面目标、内容范围、品牌气质、限制条件和成功标准。",
"en": "A design input describing audience, scenario, content, brand tone, constraints, and success criteria."
},
"prompt": {
"zh": [
"把我的想法整理成 design brief：目标用户、页面目标、核心任务、内容模块、风格方向、限制和成功标准。",
"根据这张截图反推设计简报，说明页面应该解决什么问题，以及哪些内容可以删。"
],
"en": [
"Turn my idea into a design brief with audience, page goal, content modules, style direction, and constraints."
]
},
"tip": {
"zh": "设计简报不是灵感散文，要能指导取舍：哪些必须保留，哪些可以删，什么算成功。",
"en": "A clear design brief keeps later prompts and implementation from drifting."
},
"preview": {
"kind": "term-lab",
"variant": "brief",
"title": {
"zh": "设计简报",
"en": "Design brief"
},
"subtitle": {
"zh": "目标、受众、内容、限制和成功标准",
"en": "Goal, audience, content, constraints, success"
},
"rows": [
{
"title": {
"zh": "目标",
"en": "Goal"
},
"desc": {
"zh": "让用户快速复制 prompt",
"en": "Help users copy prompts fast"
},
"tone": "brand"
},
{
"title": {
"zh": "限制",
"en": "Constraints"
},
"desc": {
"zh": "不新增大 hero",
"en": "No new large hero"
},
"tone": "muted"
},
{
"title": {
"zh": "成功",
"en": "Success"
},
"desc": {
"zh": "移动端无溢出",
"en": "No mobile overflow"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "reference-image",
"category": "media",
"category_label": {
"zh": "媒体",
"en": "Media"
},
"title": {
"zh": "参考图",
"en": "Reference Image"
},
"aliases": {
"zh": [
"参考图",
"视觉参考",
"截图参考",
"灵感图"
],
"en": [
"Reference Image",
"visual reference",
"screenshot reference",
"inspiration image"
]
},
"description": {
"zh": "用于说明布局、密度、组件关系、材质和交互状态的图片输入，帮助 AI 理解要借鉴什么、避开什么。",
"en": "An image input that communicates style, layout, component, or mood so AI can understand the target better."
},
"prompt": {
"zh": [
"根据这张参考图提取布局结构、信息密度、间距节奏、组件边界和状态表达；不要照搬品牌、文案、图片内容和装饰细节。"
],
"en": [
"Extract layout, palette, spacing, and component style from this reference image and apply it to my page."
]
},
"tip": {
"zh": "参考图要拆成可借鉴项和禁止项，否则结果容易变成低质量照搬。",
"en": "Reference images need “borrow this, avoid that” guidance, otherwise results may copy too much."
},
"preview": {
"kind": "term-lab",
"variant": "reference",
"title": {
"zh": "参考图拆解",
"en": "Reference breakdown"
},
"subtitle": {
"zh": "借结构和密度，不照搬品牌与文案",
"en": "Borrow structure and density, not brand/copy"
},
"chips": [
{
"label": {
"zh": "布局",
"en": "Layout"
},
"tone": "brand"
},
{
"label": {
"zh": "密度",
"en": "Density"
},
"tone": "muted"
},
{
"label": {
"zh": "不要照搬",
"en": "Do not copy"
},
"tone": "danger"
}
],
"rows": [
{
"title": {
"zh": "借鉴",
"en": "Borrow"
},
"desc": {
"zh": "卡片节奏、间距、状态",
"en": "Card rhythm, spacing, states"
},
"tone": "muted"
},
{
"title": {
"zh": "避开",
"en": "Avoid"
},
"desc": {
"zh": "logo、图片、装饰细节",
"en": "Logo, imagery, decoration"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "style-guide",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "风格指南",
"en": "Style Guide"
},
"aliases": {
"zh": [
"风格指南",
"样式指南",
"品牌规范",
"视觉样式指南"
],
"en": [
"Style Guide",
"style guidelines",
"brand guidelines",
"visual style guide"
]
},
"description": {
"zh": "规定颜色、字体、间距、圆角、图标、文案语气和组件用法的轻量规范。",
"en": "A lightweight guide for color, type, spacing, radius, icons, voice, and component usage."
},
"prompt": {
"zh": [
"请为这个项目生成一份可执行的「风格指南 / Style Guide」。\n\n角色：你是一名负责产品视觉一致性的 UI/UX 设计师兼设计系统维护者。\n\n目标：把“看起来统一”拆成团队可以执行的规则，让不同页面、组件和后续 AI 生成结果保持一致。\n\n必须包含：品牌语气、颜色 token、字体层级、间距节奏、圆角、边框、阴影、图标规则、图片/插画原则、组件状态、文案语气和禁用项。\n\n组件范围：至少覆盖按钮、输入框、卡片、表格、导航、弹窗、空状态、错误状态、加载状态和 focus 状态。每个组件要说明默认、hover、active、disabled、selected 的差异。\n\n写法要求：不要只写“简洁、现代、高级”。要给可执行条件，例如圆角范围、色彩比例、标题/正文大小、边框透明度、图标线宽、动效时长和响应式降级方式。\n\n输出格式：先给设计原则，再给 token、组件规范、Do/Don't、移动端规则、无障碍检查和验收清单。"
],
"en": [
"Generate an executable Style Guide for this project.\n\nRole: You are a UI/UX designer and design system maintainer responsible for visual consistency.\n\nGoal: Turn a unified look into rules the team can actually apply, so pages, components, and future AI-generated UI stay consistent.\n\nMust include: brand voice, color tokens, type scale, spacing rhythm, radius, borders, shadows, icon rules, image/illustration principles, component states, copy voice, and avoid-rules.\n\nComponent scope: Cover buttons, inputs, cards, tables, navigation, modals, empty states, error states, loading states, and focus states. Explain default, hover, active, disabled, and selected states.\n\nWriting rule: Do not only write clean, modern, or premium. Provide inspectable conditions such as radius range, color ratio, heading/body size, border opacity, icon stroke width, motion duration, and responsive fallback.\n\nReturn: principles, tokens, component rules, Do/Don't, mobile behavior, accessibility checks, and acceptance checklist."
]
},
"tip": {
"zh": "风格指南要能被执行，别只写抽象形容词。",
"en": "A style guide should be executable, not only abstract adjectives."
},
"preview": {
"kind": "term-lab",
"variant": "style-guide",
"title": {
"zh": "风格指南",
"en": "Style Guide"
},
"subtitle": {
"zh": "Token、组件状态、图标和文案语气",
"en": "Tokens, states, icons, and voice"
},
"chips": [
{
"label": {
"zh": "颜色",
"en": "Color"
},
"tone": "brand"
},
{
"label": {
"zh": "字体",
"en": "Type"
},
"tone": "muted"
},
{
"label": {
"zh": "表单状态",
"en": "Form states"
},
"tone": "muted"
},
{
"label": {
"zh": "禁用项",
"en": "Avoid rules"
},
"tone": "danger"
}
],
"rows": [
{
"title": {
"zh": "按钮",
"en": "Button"
},
"desc": {
"zh": "默认 / hover / disabled",
"en": "Default / hover / disabled"
},
"tone": "muted"
},
{
"title": {
"zh": "卡片",
"en": "Card"
},
"desc": {
"zh": "边框、阴影、间距",
"en": "Border, shadow, spacing"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "component-recipe",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "组件配方",
"en": "Component Recipe"
},
"aliases": {
"zh": [
"组件配方",
"组件做法",
"实现配方",
"recipe"
],
"en": [
"Component Recipe",
"implementation recipe",
"component how-to",
"recipe"
]
},
"description": {
"zh": "把组件从结构、数据、状态、交互、样式、无障碍到验收拆成可执行步骤，像给 AI 的实现菜谱。",
"en": "An executable breakdown of a component into structure, states, interactions, styling, and accessibility steps."
},
"prompt": {
"zh": [
"为命令面板写一份 component recipe，包含结构、搜索状态、键盘交互、空结果和复制 prompt 输出。",
"把视频预览卡片拆成组件配方：封面、播放按钮、加载态、暂停态、错误态和移动端比例。"
],
"en": [
"Write a component recipe for a command palette with structure, states, keyboard interaction, and copyable prompt output."
]
},
"tip": {
"zh": "组件配方比单句需求更适合交给 AI 编码，因为它同时约束结构、状态和验收。",
"en": "Component recipes are useful before AI coding and reduce rework."
},
"preview": {
"kind": "term-lab",
"variant": "recipe",
"title": {
"zh": "组件配方",
"en": "Component recipe"
},
"subtitle": {
"zh": "像菜谱一样拆出结构、状态和验收",
"en": "Break structure, states, and QA like a recipe"
},
"rows": [
{
"title": {
"zh": "结构",
"en": "Structure"
},
"desc": {
"zh": "Header / body / actions",
"en": "Header / body / actions"
},
"tone": "muted"
},
{
"title": {
"zh": "状态",
"en": "States"
},
"desc": {
"zh": "加载 / 空 / 错误",
"en": "Loading / empty / error"
},
"tone": "brand"
},
{
"title": {
"zh": "验收",
"en": "QA"
},
"desc": {
"zh": "键盘和移动端",
"en": "Keyboard and mobile"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "implementation-plan",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "实现计划",
"en": "Implementation Plan"
},
"aliases": {
"zh": [
"实现计划",
"开发计划",
"落地方案",
"implementation plan"
],
"en": [
"Implementation Plan",
"development plan",
"build plan",
"execution plan"
]
},
"description": {
"zh": "把一个需求拆成可执行的开发步骤，说明要改哪些文件、数据结构、组件状态、交互逻辑和验证方式。",
"en": "A development plan that breaks a design or request into files, components, data, interactions, and verification steps."
},
"prompt": {
"zh": [
"把这个 UI 需求拆成 implementation plan，列出文件、组件、数据字段、交互状态、测试和浏览器验证步骤。",
"先给实现计划，不要直接写代码；计划里标出哪些改动低风险，哪些需要截图确认。"
],
"en": [
"Turn this UI request into an implementation plan with files, component states, and tests."
]
},
"tip": {
"zh": "实现计划要能直接指导下一步操作，避免只有“调整间距、优化视觉”这种无法证明完成的话。",
"en": "Implementation plans need executable steps, not vague “improve UX” statements."
},
"preview": {
"kind": "term-lab",
"variant": "plan",
"title": {
"zh": "实现计划",
"en": "Implementation plan"
},
"subtitle": {
"zh": "文件、组件、数据、交互和验证步骤",
"en": "Files, components, data, interactions, checks"
},
"rows": [
{
"title": {
"zh": "改文件",
"en": "Files"
},
"desc": {
"zh": "terms + preview component",
"en": "terms + preview component"
},
"tone": "muted"
},
{
"title": {
"zh": "验证",
"en": "Verify"
},
"desc": {
"zh": "tsc + 浏览器截图",
"en": "tsc + browser check"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "refinement-pass",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "打磨轮次",
"en": "Refinement Pass"
},
"aliases": {
"zh": [
"打磨轮次",
"优化轮次",
"精修",
"refinement"
],
"en": [
"Refinement Pass",
"polish pass",
"iteration pass",
"refinement"
]
},
"description": {
"zh": "初版完成后的定向打磨，一次只聚焦视觉层级、交互反馈、响应式、文案或无障碍中的一小块。",
"en": "A focused pass after the first version to improve visuals, interaction, responsiveness, copy, or accessibility."
},
"prompt": {
"zh": [
"对这个页面做一轮 refinement pass，只改间距、层级、按钮状态、卡片空白和移动端溢出。",
"做一次文案打磨轮次，把机翻感、重复提示和不清楚的术语全部收紧。"
],
"en": [
"Run a refinement pass on this page, focusing only on spacing, hierarchy, button states, and mobile overflow."
]
},
"tip": {
"zh": "每轮打磨要先限定范围和停止条件，否则很容易从小优化变成整页重构。",
"en": "Refinement passes need scope, otherwise they become unbounded rewrites."
},
"preview": {
"kind": "term-lab",
"variant": "refine",
"title": {
"zh": "打磨轮次",
"en": "Refinement pass"
},
"subtitle": {
"zh": "一次只聚焦一个问题域",
"en": "Focus on one issue area"
},
"chips": [
{
"label": {
"zh": "间距",
"en": "Spacing"
},
"tone": "muted"
},
{
"label": {
"zh": "溢出",
"en": "Overflow"
},
"tone": "brand"
},
{
"label": {
"zh": "文案",
"en": "Copy"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "停止条件",
"en": "Stop condition"
},
"desc": {
"zh": "390px 无横向滚动",
"en": "No 390px overflow"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "visual-qa",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "视觉验收",
"en": "Visual QA"
},
"aliases": {
"zh": [
"视觉验收",
"视觉检查",
"UI QA",
"截图验收"
],
"en": [
"Visual QA",
"visual check",
"UI QA",
"screenshot QA"
]
},
"description": {
"zh": "用真实浏览器和截图检查页面是否有溢出、遮挡、错位、异常滚动、色彩过饱和和响应式断点问题。",
"en": "Checking screenshots or browser output for overflow, overlap, misalignment, color issues, and responsive problems."
},
"prompt": {
"zh": [
"做一次 visual QA，检查桌面和移动端是否有文字溢出、按钮错位、横向滚动、卡片高度突变和内容遮挡。",
"对 glossary 页面截图验收，标出看起来重复、过满、过艳或交互不明确的区域。"
],
"en": [
"Run visual QA for desktop and mobile, checking text overflow, button misalignment, and horizontal scrolling."
]
},
"tip": {
"zh": "类型检查只能证明代码能编译，视觉验收必须看实际页面、不同宽度和真实内容。",
"en": "Visual QA needs the real page, not only passing type checks."
},
"preview": {
"kind": "term-lab",
"variant": "qa",
"title": {
"zh": "视觉验收",
"en": "Visual QA"
},
"subtitle": {
"zh": "真实浏览器检查溢出、遮挡和高饱和",
"en": "Browser checks overflow, overlap, saturation"
},
"rows": [
{
"title": {
"zh": "桌面",
"en": "Desktop"
},
"desc": {
"zh": "1280px 通过",
"en": "1280px passed"
},
"tone": "success"
},
{
"title": {
"zh": "移动端",
"en": "Mobile"
},
"desc": {
"zh": "390px 通过",
"en": "390px passed"
},
"tone": "success"
},
{
"title": {
"zh": "风险",
"en": "Risk"
},
"desc": {
"zh": "文字遮挡",
"en": "Text overlap"
},
"tone": "warning"
}
]
},
"pattern": null
},
{
"id": "prompt-constraints",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "提示词约束",
"en": "Prompt Constraints"
},
"aliases": {
"zh": [
"提示词约束",
"限制条件",
"不要做",
"prompt constraints"
],
"en": [
"Prompt Constraints",
"constraints",
"avoid rules",
"do-not rules"
]
},
"description": {
"zh": "提示词里用来约束 AI 行为的边界条件，明确哪些不能改、哪些风格要避免、哪些输出必须保留。",
"en": "The part of a prompt that states what AI must avoid and what boundaries it must follow."
},
"prompt": {
"zh": [
"给这段 prompt 加约束：不要使用高饱和渐变、不要新增 landing hero、不要改变导航结构、不要删除现有数据字段。",
"把“高级一点”改写成可检查约束：低饱和配色、8px 以下圆角、清晰 focus、无文字遮挡。"
],
"en": [
"Add constraints to this prompt: avoid high-saturation gradients, do not add a landing hero, and do not change navigation structure."
]
},
"tip": {
"zh": "约束要写成可检查条件；“别太 AI”太虚，“不要大面积渐变、发光和过度玻璃材质”更有用。",
"en": "Constraints should be specific and checkable. “Not too fancy” is weaker than “no large gradients or glow”."
},
"preview": {
"kind": "term-lab",
"variant": "constraints",
"title": {
"zh": "提示词约束",
"en": "Prompt constraints"
},
"subtitle": {
"zh": "明确不能改、不能新增和必须保留",
"en": "State what cannot change and must remain"
},
"chips": [
{
"label": {
"zh": "不改导航",
"en": "Keep nav"
},
"tone": "muted"
},
{
"label": {
"zh": "不删字段",
"en": "Keep fields"
},
"tone": "muted"
},
{
"label": {
"zh": "无大渐变",
"en": "No large gradient"
},
"tone": "danger"
}
],
"rows": [
{
"title": {
"zh": "可检查",
"en": "Checkable"
},
"desc": {
"zh": "8px 以下圆角",
"en": "Radius under 8px"
},
"tone": "muted"
},
{
"title": {
"zh": "边界",
"en": "Boundary"
},
"desc": {
"zh": "只改视觉，不改数据",
"en": "Style only, no data changes"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "output-format",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "输出格式",
"en": "Output Format"
},
"aliases": {
"zh": [
"输出格式",
"返回格式",
"格式要求",
"结构化输出"
],
"en": [
"Output Format",
"response format",
"format requirements",
"structured output"
]
},
"description": {
"zh": "规定 AI 回答应该长什么样，例如分段结构、JSON、代码块、清单、差异说明或可复制 prompt。",
"en": "Instructions for how AI should structure its answer, such as list, JSON, code block, table, or step plan."
},
"prompt": {
"zh": [
"要求输出格式为：组件说明、状态列表、代码实现、验收清单四个部分。",
"让 AI 只返回 JSON 数组，每项包含 id、title、description、prompt 和 tip，方便直接写入词库。"
],
"en": [
"Require this output format: component description, state list, code implementation, and acceptance checklist."
]
},
"tip": {
"zh": "越需要落地到项目，越要限制输出格式；否则后面会花大量时间清理解释性文字。",
"en": "Output format reduces cleanup cost, especially when copying results into a project."
},
"preview": {
"kind": "term-lab",
"variant": "format",
"title": {
"zh": "输出格式",
"en": "Output format"
},
"subtitle": {
"zh": "让 AI 按固定结构返回，减少清理成本",
"en": "Fixed response shape reduces cleanup"
},
"rows": [
{
"title": {
"zh": "组件说明",
"en": "Component description"
},
"desc": {
"zh": "一段话",
"en": "One paragraph"
},
"tone": "muted"
},
{
"title": {
"zh": "状态列表",
"en": "State list"
},
"desc": {
"zh": "数组",
"en": "Array"
},
"tone": "brand"
},
{
"title": {
"zh": "验收清单",
"en": "Checklist"
},
"desc": {
"zh": "可勾选",
"en": "Checkable"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "design-critique",
"category": "dev",
"category_label": {
"zh": "开发基础",
"en": "Development Basics"
},
"title": {
"zh": "设计评审",
"en": "Design Critique"
},
"aliases": {
"zh": [
"设计评审",
"设计反馈",
"UI 评审",
"critique"
],
"en": [
"Design Critique",
"design review",
"UI critique",
"feedback pass"
]
},
"description": {
"zh": "从目标是否明确、信息层级、可用性、视觉一致性、文案清晰度和实现风险角度评审界面。",
"en": "Reviewing an interface through goal, hierarchy, usability, visual consistency, and clarity."
},
"prompt": {
"zh": [
"从 vibe coding 用户角度评审这个页面，指出信息重复、交互不清、视觉不稳定和不利于复制使用的地方。",
"请给设计评审，但每条反馈都要包含问题、影响、建议改法和验收方式。"
],
"en": [
"Critique this page from a vibe coding user perspective, calling out repetition, unclear interaction, and unstable visuals."
]
},
"tip": {
"zh": "好的设计评审不会只说“好看/不好看”，而是指出问题影响、修改动作和完成标准。",
"en": "Design critique should give actionable suggestions, not only whether it looks good."
},
"preview": {
"kind": "term-lab",
"variant": "critique",
"title": {
"zh": "设计评审",
"en": "Design critique"
},
"subtitle": {
"zh": "问题、影响、改法、验收四段式",
"en": "Issue, impact, fix, verification"
},
"rows": [
{
"title": {
"zh": "问题",
"en": "Issue"
},
"desc": {
"zh": "卡片预览重复",
"en": "Repeated previews"
},
"tone": "danger"
},
{
"title": {
"zh": "影响",
"en": "Impact"
},
"desc": {
"zh": "用户误以为内容重复",
"en": "Users think content repeats"
},
"tone": "muted"
},
{
"title": {
"zh": "改法",
"en": "Fix"
},
"desc": {
"zh": "每词条专属预览",
"en": "Per-term preview"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "mobile-app-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "移动应用风格",
"en": "Mobile App Style"
},
"aliases": {
"zh": [
"移动应用风格",
"App 风格",
"移动端 UI",
"mobile app"
],
"en": [
"Mobile App Style",
"app UI style",
"mobile UI",
"native app feel"
]
},
"description": {
"zh": "偏原生移动应用的视觉与交互风格，强调底部导航、触控尺寸、卡片堆叠和单手操作。",
"en": "A mobile-native visual and interaction style emphasizing bottom navigation, touch targets, stacked cards, and one-handed use."
},
"prompt": {
"zh": [
"请把这个界面重设计为「移动应用风格 / Mobile App Style」。\n\n角色：你是一名熟悉 iOS/Android 触控体验、移动信息架构和前端响应式实现的产品设计师。\n\n设计理念：移动应用不是把桌面页面缩小，而是围绕单手操作、清晰路径、触控反馈和安全区重新组织任务。\n\n布局要求：使用移动优先结构，顶部提供返回/标题/关键状态，主体单列堆叠，底部导航或主操作固定在安全区内。避免桌面式多栏、过密表格和小按钮。\n\n触控要求：主要点击目标高度不低于 44px；相邻操作要有足够间距；危险操作要二次确认；所有交互都要有 pressed、loading、disabled 和 error 状态。\n\n视觉要求：浅色 surface、清晰层级、少量品牌色、稳定圆角和弱阴影；列表、卡片和底部导航要像原生 App 一样可靠，不要做成营销落地页。\n\n输出格式：先给移动任务路径，再给页面结构、导航层级、触控尺寸、状态反馈、空/错/加载、响应式和反例。"
],
"en": [
"Redesign this interface around a Mobile App Style.\n\nRole: You are a product designer familiar with iOS/Android touch experience, mobile information architecture, and responsive frontend implementation.\n\nPrinciple: Mobile app style is not a shrunken desktop page. Reorganize tasks around one-handed use, clear navigation paths, touch feedback, and safe areas.\n\nLayout: Use a mobile-first structure with top back/title/status, single-column content, and bottom navigation or primary action fixed inside the safe area. Avoid desktop multi-column layouts, dense tables, and tiny buttons.\n\nTouch requirements: Primary targets should be at least 44px tall. Adjacent actions need enough spacing. Destructive actions require confirmation. Include pressed, loading, disabled, and error states.\n\nVisual requirements: Use light surfaces, clear hierarchy, limited brand color, stable radius, and subtle shadows. Lists, cards, and bottom nav should feel native and reliable, not like a marketing landing page.\n\nReturn: mobile task path, page structure, navigation depth, touch sizing, state feedback, empty/error/loading states, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "移动应用风格要优先考虑触控和导航深度，而不是只缩小桌面页面。",
"en": "Mobile app style prioritizes touch and navigation depth, not just shrinking desktop UI."
},
"preview": {
"kind": "term-lab",
"variant": "mobile",
"title": {
"zh": "移动应用风格",
"en": "Mobile app style"
},
"subtitle": {
"zh": "底部导航、安全区和大触控目标",
"en": "Bottom nav, safe area, large targets"
},
"chips": [
{
"label": {
"zh": "44px+",
"en": "44px+"
},
"tone": "brand"
},
{
"label": {
"zh": "底部导航",
"en": "Bottom nav"
},
"tone": "muted"
},
{
"label": {
"zh": "单列卡片",
"en": "Single column"
},
"tone": "muted"
}
],
"rows": [
{
"title": {
"zh": "返回路径",
"en": "Back path"
},
"desc": {
"zh": "每层都可退出",
"en": "Every layer exits"
},
"tone": "muted"
},
{
"title": {
"zh": "加载态",
"en": "Loading"
},
"desc": {
"zh": "骨架屏",
"en": "Skeleton"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "enterprise-saas",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "企业 SaaS 风格",
"en": "Enterprise SaaS Style"
},
"aliases": {
"zh": [
"企业后台风格",
"SaaS 后台",
"admin UI",
"工作台风格"
],
"en": [
"Enterprise SaaS",
"admin UI",
"workbench UI"
]
},
"description": {
"zh": "面向工作场景的克制产品界面，强调信息密度、稳定导航、可扫描表格、明确状态和可重复操作效率。",
"en": "A restrained product style for work scenarios, focused on density, stable navigation, scannable tables, clear states, and repeatable efficiency."
},
"prompt": {
"zh": [
"请以「企业 SaaS 风格 / Enterprise SaaS」为核心方向重设计这个界面。\n\n角色：你是一名做过复杂 B2B 产品、管理台和运营工具的高级 UI/UX 设计师兼前端工程师。\n\n设计理念：企业 SaaS 的高级感来自稳定、清楚和高效，不来自大面积装饰。页面应该帮助用户反复完成任务、扫描状态和处理异常。\n\n适用场景：CRM、后台管理、团队协作、数据运营、权限配置、账单、审批和企业设置。不适合过度营销化 hero 或娱乐化视觉。\n\n布局要求：使用稳定侧栏/顶栏、清晰面包屑、紧凑筛选区、可扫描表格、批量操作、分页和空/错/加载状态。信息密度要高但不拥挤。\n\n视觉要求：低饱和中性色、少量品牌色、8px 左右圆角、轻边框、弱阴影、明确状态色；避免大卡片堆叠、插画英雄区和高饱和渐变。\n\n交互要求：支持键盘焦点、表格 hover、选中、批量操作、权限限制、确认反馈和错误恢复。\n\n输出格式：先给用户任务和信息架构，再给导航、表格、筛选、状态、颜色、密度、响应式和反例。"
],
"en": [
"Redesign this interface around an \"Enterprise SaaS\" direction.\n\nRole: You are a senior UI/UX designer and frontend engineer experienced with complex B2B products, admin consoles, and operational tools.\n\nPrinciple: Enterprise SaaS polish comes from stability, clarity, and efficiency, not decoration. The page should help users repeat tasks, scan status, and resolve exceptions.\n\nUse cases: CRM, admin systems, collaboration tools, data operations, permissions, billing, approvals, and enterprise settings. Avoid marketing-style hero sections and playful visuals.\n\nLayout: Use stable sidebar/topbar navigation, breadcrumbs, compact filters, scannable tables, bulk actions, pagination, and complete empty/error/loading states. Keep density high but not cramped.\n\nVisual requirements: Low-saturation neutrals, limited brand color, around 8px radius, light borders, subtle shadows, and clear status colors. Avoid stacked decorative cards, illustration heroes, and saturated gradients.\n\nInteraction: Support keyboard focus, table hover, selection, bulk actions, permission limits, confirmation feedback, and error recovery.\n\nReturn: user tasks, information architecture, navigation, tables, filters, states, colors, density, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "企业 SaaS 不需要花哨，核心是扫读、决策和重复操作效率。",
"en": "Enterprise SaaS does not need spectacle. It needs scanning, decision-making, and repeated-action efficiency."
},
"preview": {
"kind": "term-lab",
"variant": "saas",
"templates": 4,
"title": {
"zh": "企业 SaaS 风格",
"en": "Enterprise SaaS Style"
},
"subtitle": {
"zh": "稳定导航、密集信息和低干扰配色",
"en": "Stable nav, dense information, low-noise palette"
},
"palette": [
"#f7faf9",
"#ffffff",
"#0f172a",
"#35c5ba",
"#e2e8f0"
],
"chips": [
{
"label": {
"zh": "表格",
"en": "Tables"
},
"tone": "muted"
},
{
"label": {
"zh": "筛选",
"en": "Filters"
},
"tone": "muted"
},
{
"label": {
"zh": "低干扰",
"en": "Low noise"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "dashboard-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "仪表盘风格",
"en": "Dashboard Style"
},
"aliases": {
"zh": [
"数据看板风格",
"dashboard UI",
"指标看板"
],
"en": [
"Dashboard style",
"analytics dashboard",
"metrics board"
]
},
"description": {
"zh": "围绕指标、趋势、筛选、异常和决策路径组织的分析型界面风格。",
"en": "An analytical interface style organized around metrics, trends, filters, exceptions, and decision paths."
},
"prompt": {
"zh": [
"请以「仪表盘风格 / Dashboard」为核心方向重设计这个界面。\n\n角色：你是一名擅长数据产品、BI 和可视化体验的 UI/UX 设计师兼前端工程师。\n\n设计理念：仪表盘不是图表陈列墙，而是帮助用户回答“现在发生了什么、哪里异常、下一步做什么”。\n\n适用场景：运营看板、销售分析、系统监控、财务概览、产品指标、增长分析和管理驾驶舱。\n\n信息架构：先展示 3-6 个关键指标，再展示趋势、分布、排行、异常和明细；筛选条件要清楚，时间范围要可见。\n\n视觉要求：使用中性色底、清晰卡片边界、有限图表色板、状态色和足够的图例/单位/轴标签；避免霓虹大屏、无单位数字、重复图表和装饰性 3D 图。\n\n交互要求：筛选联动、hover tooltip、空数据、加载骨架、异常标记、钻取入口和导出操作要明确。\n\n输出格式：先给业务问题和指标层级，再给布局、图表类型、颜色、状态、交互、响应式和反例。"
],
"en": [
"Redesign this interface around a \"Dashboard\" direction.\n\nRole: You are a UI/UX designer and frontend engineer skilled in data products, BI, and visualization experience.\n\nPrinciple: A dashboard is not a chart wall. It should answer: what is happening, what is abnormal, and what should happen next.\n\nUse cases: operations dashboards, sales analytics, system monitoring, finance overview, product metrics, growth analysis, and executive cockpit views.\n\nInformation architecture: Start with 3-6 key metrics, then show trends, distribution, ranking, exceptions, and details. Filters and time ranges must be visible.\n\nVisual requirements: Use neutral surfaces, clear card boundaries, a limited chart palette, status colors, legends, units, and axis labels. Avoid neon command centers, unitless numbers, duplicate charts, and decorative 3D charts.\n\nInteraction: Include filter linking, hover tooltips, empty data, loading skeletons, anomaly markers, drill-down entries, and export actions.\n\nReturn: business questions, metric hierarchy, layout, chart choices, colors, states, interactions, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "仪表盘要先回答问题，再选择图表；不要为了丰富而堆图。",
"en": "Dashboards should answer questions before choosing charts. Do not add charts just to look rich."
},
"preview": {
"kind": "term-lab",
"variant": "dashboard",
"templates": 4,
"title": {
"zh": "仪表盘风格",
"en": "Dashboard Style"
},
"subtitle": {
"zh": "KPI、趋势、筛选和异常提醒",
"en": "KPI, trends, filters, alerts"
},
"palette": [
"#f7faf9",
"#ffffff",
"#35c5ba",
"#f59e0b",
"#64748b"
],
"chips": [
{
"label": {
"zh": "KPI",
"en": "KPI"
},
"tone": "muted"
},
{
"label": {
"zh": "趋势图",
"en": "Trend"
},
"tone": "muted"
},
{
"label": {
"zh": "异常",
"en": "Alerts"
},
"tone": "warning"
}
]
},
"pattern": null
},
{
"id": "swiss-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "瑞士平面风格",
"en": "Swiss Style"
},
"aliases": {
"zh": [
"瑞士风格",
"国际主义平面",
"网格排版"
],
"en": [
"Swiss style",
"international typographic style",
"grid typography"
]
},
"description": {
"zh": "以网格、无衬线字体、强对齐、克制色彩和客观信息层级为核心的理性视觉风格。",
"en": "A rational visual style built on grids, sans-serif typography, strict alignment, restrained color, and objective hierarchy."
},
"prompt": {
"zh": [
"请以「瑞士平面风格 / Swiss Style」为核心方向重设计这个界面。\n\n角色：你是一名受国际主义平面设计影响的 UI/UX 设计师兼前端工程师。\n\n设计理念：用网格、对齐、比例和排版建立秩序，让信息本身成为视觉主体。\n\n适用场景：作品集、文化机构、设计系统、内容索引、编辑页面、品牌规范和理性科技产品。\n\n视觉要求：使用严格网格、左对齐、无衬线字体、大字号标题、强留白、黑白灰和少量红/蓝/黄强调色；避免装饰插画、柔软拟物和随意错位。\n\n交互要求：导航、标签、筛选和列表要像版面系统一样整齐；hover/focus 可用细线、反色或强调色表达。\n\n输出格式：先给网格系统和信息层级，再给字体、字号、对齐、色彩、模块、状态、响应式和反例。"
],
"en": [
"Redesign this interface around a \"Swiss Style\" direction.\n\nRole: You are a UI/UX designer and frontend engineer influenced by International Typographic Style.\n\nPrinciple: Use grid, alignment, proportion, and typography to create order, letting information become the visual subject.\n\nUse cases: portfolios, cultural institutions, design systems, content indexes, editorial pages, brand guidelines, and rational technology products.\n\nVisual requirements: Use strict grids, left alignment, sans-serif type, large headings, strong whitespace, black/white/gray, and small red/blue/yellow accents. Avoid decorative illustration, soft skeuomorphism, and random offsets.\n\nInteraction: Navigation, tags, filters, and lists should feel like part of the same layout system. Hover/focus can use hairlines, inversion, or accent color.\n\nReturn: grid system, information hierarchy, typography, type scale, alignment, color, modules, states, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "瑞士风不是普通极简，它更强调网格、客观排版和严密对齐。",
"en": "Swiss style is not generic minimalism. It emphasizes grid, objective typography, and strict alignment."
},
"preview": {
"kind": "term-lab",
"variant": "swiss",
"templates": 2,
"title": {
"zh": "瑞士平面风格",
"en": "Swiss Style"
},
"subtitle": {
"zh": "严格网格、左对齐和理性层级",
"en": "Strict grid, left alignment, rational hierarchy"
},
"palette": [
"#ffffff",
"#0f172a",
"#e2e8f0",
"#ef4444"
],
"chips": [
{
"label": {
"zh": "Grid",
"en": "Grid"
},
"tone": "brand"
},
{
"label": {
"zh": "Sans",
"en": "Sans"
},
"tone": "muted"
},
{
"label": {
"zh": "Left align",
"en": "Left align"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "retro-ui",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "复古 UI",
"en": "Retro UI"
},
"aliases": {
"zh": [
"复古界面",
"像素风",
"早期网页风格"
],
"en": [
"Retro UI",
"pixel UI",
"early web style"
]
},
"description": {
"zh": "借用旧电脑、早期网页、像素图形、印刷色和怀旧控件语言的复古数字界面。",
"en": "A nostalgic digital style borrowing from old computers, early websites, pixel graphics, print colors, and vintage controls."
},
"prompt": {
"zh": [
"请以「复古 UI / Retro UI」为核心方向重设计这个界面。\n\n角色：你是一名懂数字怀旧、游戏 UI 和现代可用性的 UI/UX 设计师兼前端工程师。\n\n设计理念：复古不是降低质量，而是有选择地借用旧时代的视觉符号，并用现代前端保证可读和易用。\n\n适用场景：个人站、创意作品集、游戏、音乐、活动页、开发者工具和文化项目。不适合正式政企、医疗和重业务后台。\n\n视觉要求：可使用像素边框、老系统窗口、低保真图标、有限调色板、硬阴影、扫描线或纸张颗粒；但文字必须清晰，布局不能真的混乱。\n\n交互要求：按钮、窗口、标签和状态可以模拟旧系统反馈；hover 用反色、硬阴影或像素位移。移动端要减少小字号和密集像素装饰。\n\n输出格式：先给复古年代参照，再给调色板、字体、边框、图标、窗口结构、状态、响应式和反例。"
],
"en": [
"Redesign this interface around a \"Retro UI\" direction.\n\nRole: You are a UI/UX designer and frontend engineer who understands digital nostalgia, game UI, and modern usability.\n\nPrinciple: Retro does not mean low quality. Borrow selected visual symbols from an earlier era while keeping the interface readable and usable.\n\nUse cases: personal sites, creative portfolios, games, music, campaigns, developer tools, and cultural projects. Avoid formal government, healthcare, and heavy business admin tools.\n\nVisual requirements: You may use pixel borders, old OS windows, low-fidelity icons, limited palettes, hard shadows, scanlines, or paper grain. Text must remain clear and the layout must not actually be chaotic.\n\nInteraction: Buttons, windows, tabs, and states can mimic old system feedback. Hover can use inversion, hard shadow, or pixel offset. Reduce tiny type and dense pixel decoration on mobile.\n\nReturn: era reference, palette, typography, borders, icons, window structure, states, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "复古 UI 要选定年代和媒介，不要把像素、纸张、霓虹、老电脑全混在一起。",
"en": "Retro UI needs a chosen era and medium. Do not mix pixels, paper, neon, and old computers without a reason."
},
"preview": {
"kind": "term-lab",
"variant": "retro",
"templates": 2,
"title": {
"zh": "复古 UI",
"en": "Retro UI"
},
"subtitle": {
"zh": "有限色板、硬边框和现代可读性",
"en": "Limited palette, hard borders, modern readability"
},
"palette": [
"#f7e7b3",
"#111827",
"#ef6f6c",
"#8fd1c7"
],
"chips": [
{
"label": {
"zh": "复古",
"en": "Retro"
},
"tone": "muted"
},
{
"label": {
"zh": "有限色板",
"en": "Limited palette"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "cyberpunk",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "赛博朋克风格",
"en": "Cyberpunk"
},
"aliases": {
"zh": [
"赛博朋克",
"霓虹风",
"未来科技风"
],
"en": [
"Cyberpunk",
"neon UI",
"future tech UI"
]
},
"description": {
"zh": "用深色城市感、霓虹边缘、冷暖冲突、技术噪声和未来排版制造强主题界面。",
"en": "A strong themed style using dark urban surfaces, neon edges, cool-warm contrast, technical noise, and futuristic typography."
},
"prompt": {
"zh": [
"请以「赛博朋克 / Cyberpunk」为核心方向重设计这个界面。\n\n角色：你是一名擅长强主题视觉、游戏化界面和前端动效的 UI/UX 设计师。\n\n设计理念：赛博朋克是高压未来城市感，不是满屏霓虹。它需要黑暗基底、信息层级和有限但锋利的发光重点。\n\n适用场景：游戏、音乐、活动页、Web3、AI 实验产品、创意发布和沉浸式作品。不适合严肃后台、儿童教育和长文阅读。\n\n视觉要求：使用深色 surface、青紫/洋红/酸黄少量强调、锐利线框、故障感细节、技术标签和高对比标题。发光只用于焦点和状态，不要污染正文。\n\n交互要求：hover 可用扫描线、边框发光、轻微 glitch 或位移；必须提供 reduced-motion 方案，保证文字对比。\n\n输出格式：先给主题世界观和信息层级，再给色彩、字体、线框、发光规则、动效、状态、响应式和反例。"
],
"en": [
"Redesign this interface around a \"Cyberpunk\" direction.\n\nRole: You are a UI/UX designer skilled in strong visual themes, game-like interfaces, and frontend motion.\n\nPrinciple: Cyberpunk is a high-pressure future city mood, not neon everywhere. It needs a dark base, clear hierarchy, and limited but sharp luminous accents.\n\nUse cases: games, music, campaigns, Web3, AI experiments, creative launches, and immersive portfolios. Avoid serious admin tools, children's education, and long reading.\n\nVisual requirements: Use dark surfaces, small cyan/purple/magenta/acid-yellow accents, sharp wireframes, glitch details, technical labels, and high-contrast headings. Glow should mark focus and state, not body text.\n\nInteraction: Hover can use scanlines, glowing borders, subtle glitch, or offset. Provide reduced-motion behavior and maintain text contrast.\n\nReturn: theme world, hierarchy, color, typography, wireframes, glow rules, motion, states, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "赛博朋克要克制发光面积；真正高级的是暗部层次和少量锋利状态光。",
"en": "Cyberpunk needs restrained glow. The premium feel comes from dark depth and a few sharp status lights."
},
"preview": {
"kind": "term-lab",
"variant": "cyberpunk",
"templates": 2,
"title": {
"zh": "赛博朋克风格",
"en": "Cyberpunk"
},
"subtitle": {
"zh": "深色 surface + 小面积冷色强调",
"en": "Dark surfaces plus small cool accents"
},
"palette": [
"#10131b",
"#22d3ee",
"#e879f9",
"#ffffff"
],
"chips": [
{
"label": {
"zh": "深色",
"en": "Dark"
},
"tone": "muted"
},
{
"label": {
"zh": "边缘强调",
"en": "Edge accent"
},
"tone": "brand"
},
{
"label": {
"zh": "少发光",
"en": "Less glow"
},
"tone": "warning"
}
]
},
"pattern": null
},
{
"id": "claymorphism",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "黏土拟态",
"en": "Claymorphism"
},
"aliases": {
"zh": [
"黏土拟态",
"软黏土风格",
"黏土质感",
"clay UI",
"蓬松 3D",
"可按压 UI"
],
"en": [
"Claymorphism",
"clay UI",
"puffy UI",
"soft 3D",
"soft clay style",
"pressable UI"
]
},
"description": {
"zh": "用高明度低饱和色、巨大圆角、内外双重阴影和弹性按压反馈，模拟柔软黏土被捏出的蓬松实体感。",
"en": "A tactile style that uses bright low-saturation colors, oversized radius, inner/outer shadows, and springy press feedback to mimic soft puffy clay objects."
},
"prompt": {
"zh": [
"请以「Claymorphism / 黏土形态」为核心视觉方向重设计这个界面。\n\n角色：你是一位专注 Claymorphism 的 UI/UX 设计专家兼前端工程师，擅长用黏土质感、蓬松形态和柔和光影，把数字界面做得像真实可触摸的软物体。\n\n设计哲学：数字世界的实体化与软化。界面元素不应像冰冷像素，而应像被捏出来的哑光黏土、软糖或充气体块，让用户感到温暖、安全、乐观和好奇。\n\n适用场景：儿童教育、早教、休闲游戏、创意作品集、Web3/NFT、冥想与健康类产品。若用于严肃金融、法律文档或数据密集后台，必须降低装饰密度和信息占用。\n\n视觉要求：拒绝锐利边缘和平面色块；所有卡片、按钮、图标容器使用巨大圆角或胶囊形；主体元素要有蓬松感、悬浮感和厚度。背景与主体使用同色系但更浅，整体采用高明度、低饱和的马卡龙/粉彩配色。\n\n材质要求：表面必须是哑光漫反射，不要玻璃高光或塑料反光。使用双重阴影机制：外部阴影表达悬浮高度，内部上方浅色高光和内部下方深色阴影表达圆滑倒角与厚度。输入框应像黏土表面被挖出的凹槽。\n\n交互要求：hover 时元素轻微上浮、阴影扩散；active 时外阴影收缩或消失，内阴影加深，模拟被按下去；松开时使用 spring/ease-out 回弹，产生轻微果冻感。所有状态都要可访问、可读、不过度动画。\n\n输出格式：先给适用场景判断和信息架构，再给色彩、圆角、阴影 token、按钮/卡片/输入框状态、动效曲线、响应式策略，最后列出反例：高饱和糖果色、玻璃高光、硬边框、过重投影、信息密集后台强行套黏土风。"
],
"en": [
"Redesign this interface around a \"Claymorphism\" visual direction.\n\nRole: You are a UI/UX designer and frontend engineer specializing in Claymorphism, using clay-like material, puffy forms, and soft lighting to make digital UI feel tactile.\n\nPhilosophy: Make the digital world physical and soft. Elements should feel like matte clay, soft candy, or inflated objects rather than cold pixels.\n\nUse cases: children's education, casual games, creative portfolios, Web3/NFT, meditation, and wellness products. For finance, legal, or dense dashboards, reduce decoration and information footprint.\n\nVisual requirements: Avoid sharp edges and flat blocks. Use oversized radius, pill shapes, puffy surfaces, floating depth, and thickness. Pair bright low-saturation pastel colors with a slightly lighter background.\n\nMaterial requirements: Use a matte finish, not glass or plastic shine. Apply dual-shadow logic: outer drop shadows for floating height, plus inner top highlights and inner lower shadows for rounded bevel thickness. Inputs should look like soft carved grooves.\n\nInteraction requirements: On hover, lift slightly and spread the shadow. On active, collapse the outer shadow and deepen inner shadows to mimic pressing into the surface. Release with a spring/ease-out rebound. Keep states accessible and avoid excessive motion.\n\nReturn: use-case fit, information architecture, palette, radius tokens, shadow tokens, button/card/input states, motion curve, responsive strategy, and anti-patterns such as candy saturation, glass highlights, hard borders, heavy shadows, or forcing clay style onto dense admin screens."
]
},
"tip": {
"zh": "黏土拟态的关键不是“可爱颜色”，而是内外阴影做出的厚度、凹凸和按压反馈。",
"en": "Claymorphism is not just cute colors. Its core is thickness, bevel, indentation, and press feedback created by inner and outer shadows."
},
"preview": {
"kind": "term-lab",
"variant": "clay",
"templates": 2,
"title": {
"zh": "黏土质感",
"en": "Claymorphism"
},
"subtitle": {
"zh": "蓬松体块、内外阴影和物理按压感",
"en": "Puffy blocks, dual shadows, tactile press states"
},
"palette": [
"#e9d6c9",
"#e78bc2",
"#7fc3af",
"#e7c95d",
"#253048"
],
"chips": [
{
"label": {
"zh": "内外阴影",
"en": "Dual shadow"
},
"tone": "muted"
},
{
"label": {
"zh": "按压回弹",
"en": "Press rebound"
},
"tone": "muted"
},
{
"label": {
"zh": "哑光蓬松",
"en": "Matte puffy"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "monochrome",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "单色风格",
"en": "Monochrome"
},
"aliases": {
"zh": [
"单色风格",
"黑白灰",
"monochrome UI",
"一色系"
],
"en": [
"Monochrome",
"black and white UI",
"single-hue UI"
]
},
"description": {
"zh": "用单一色相或黑白灰，通过明度、密度、边框、纹理和排版层级建立统一视觉系统。",
"en": "A unified visual system using one hue or grayscale, with hierarchy built through value, density, borders, texture, and typography."
},
"prompt": {
"zh": [
"请以「单色风格 / Monochrome」为核心方向重设计这个界面。\n\n角色：你是一名擅长克制配色、明度层级和品牌一致性的 UI/UX 设计师。\n\n设计理念：单色不是没有变化，而是把变化压缩到明度、透明度、线条、纹理和字体层级里。\n\n适用场景：高端品牌、摄影、作品集、文档工具、专业服务、艺术内容和需要安静气质的产品。\n\n视觉要求：选择一个主色体系或黑白灰体系，建立 5-7 个明度阶梯；用边框、留白、字重和 surface 区分层级；强调色只能小面积出现。\n\n可用性要求：所有状态不能只靠颜色深浅区分，必须结合图标、文字、边框或位置。暗色单色要特别检查对比度。\n\n输出格式：先给色阶系统，再给布局、字体、边框、纹理、状态、图表/数据处理、响应式和反例。"
],
"en": [
"Redesign this interface around a \"Monochrome\" direction.\n\nRole: You are a UI/UX designer skilled in restrained color, value hierarchy, and brand consistency.\n\nPrinciple: Monochrome does not mean no variation. It compresses variation into value, opacity, line, texture, and typography.\n\nUse cases: premium brands, photography, portfolios, documentation tools, professional services, art content, and calm products.\n\nVisual requirements: Choose one hue family or grayscale system and define 5-7 value steps. Use borders, whitespace, weight, and surfaces for hierarchy. Accent color should appear only in small areas.\n\nUsability: States cannot rely only on shade changes. Combine icon, text, border, or position. Check contrast carefully, especially in dark monochrome.\n\nReturn: value scale, layout, typography, borders, texture, states, chart/data treatment, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "单色风格考验明度层级；如果色阶不清楚，页面会糊成一片。",
"en": "Monochrome depends on value hierarchy. Without clear value steps, the page becomes muddy."
},
"preview": {
"kind": "term-lab",
"variant": "mono",
"templates": 2,
"title": {
"zh": "单色风格",
"en": "Monochrome"
},
"subtitle": {
"zh": "用明度层级建立秩序，一个小强调色",
"en": "Value hierarchy plus one tiny accent"
},
"palette": [
"#ffffff",
"#f1f5f9",
"#64748b",
"#0f172a",
"#35c5ba"
],
"chips": [
{
"label": {
"zh": "明度层级",
"en": "Value levels"
},
"tone": "muted"
},
{
"label": {
"zh": "小强调色",
"en": "Tiny accent"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "icon-button",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "图标按钮",
"en": "Icon Button"
},
"aliases": {
"zh": [
"图标按钮",
"纯图标按钮",
"工具栏按钮"
],
"en": [
"Icon Button",
"icon-only button",
"toolbar button"
]
},
"description": {
"zh": "只使用图标表达操作的紧凑按钮，适合工具栏和空间有限的界面。",
"en": "A compact button that communicates an action through an icon, commonly used in toolbars and constrained spaces."
},
"prompt": {
"zh": [
"添加一组图标按钮，提供默认、悬停、选中、禁用和键盘 focus 状态；每个按钮必须有 aria-label 和悬停提示。"
],
"en": [
"Add icon buttons with default, hover, selected, disabled, and keyboard focus states; include an aria-label and tooltip for each action."
]
},
"tip": {
"zh": "陌生图标不能只靠形状猜含义，应补充 tooltip 和无障碍名称。",
"en": "Unfamiliar icons need tooltips and accessible names rather than relying on shape alone."
},
"preview": {
"kind": "icon-button"
},
"pattern": null
},
{
"id": "time-picker",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "时间选择器",
"en": "Time Picker"
},
"aliases": {
"zh": [
"时间选择器",
"时间输入",
"时分选择"
],
"en": [
"Time Picker",
"time input",
"hour minute picker"
]
},
"description": {
"zh": "用于选择或输入具体时间，并处理时间格式、步进和可用范围。",
"en": "A control for selecting or entering a time with format, step, and availability constraints."
},
"prompt": {
"zh": [
"添加时间选择器，支持小时和分钟调整、键盘输入、12/24 小时格式、禁用时段和错误提示。"
],
"en": [
"Add a time picker with hour and minute controls, keyboard input, 12/24-hour formats, disabled ranges, and validation feedback."
]
},
"tip": {
"zh": "必须说明时区、时间格式和可选范围，避免只做一个没有约束的钟表图标。",
"en": "Define timezone, display format, and valid ranges instead of showing an unconstrained clock control."
},
"preview": {
"kind": "time-picker"
},
"pattern": null
},
{
"id": "number-input",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "数字输入框",
"en": "Input Number"
},
"aliases": {
"zh": [
"数字输入框",
"数字步进器",
"数量输入"
],
"en": [
"Input Number",
"number stepper",
"numeric input"
]
},
"description": {
"zh": "用于输入受范围和步长约束的数值，通常带增加和减少操作。",
"en": "A numeric field constrained by range and step, often paired with increment and decrement controls."
},
"prompt": {
"zh": [
"添加数字输入框，设置最小值、最大值、步长、单位以及增加、减少、禁用和越界状态。"
],
"en": [
"Add a number input with min, max, step, unit, increment, decrement, disabled, and out-of-range states."
]
},
"tip": {
"zh": "数字输入要同时允许键盘输入，并清楚处理越界值和空值。",
"en": "Numeric inputs should allow keyboard entry and handle empty and out-of-range values clearly."
},
"preview": {
"kind": "number-input"
},
"pattern": null
},
{
"id": "rating",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "评分",
"en": "Rating"
},
"aliases": {
"zh": [
"评分",
"星级评分",
"满意度评分"
],
"en": [
"Rating",
"star rating",
"satisfaction rating"
]
},
"description": {
"zh": "让用户通过星级或等级快速表达评价的选择控件。",
"en": "A selection control for quickly expressing a score through stars or ordered levels."
},
"prompt": {
"zh": [
"添加一个五级评分控件，支持悬停预览、点击选择、键盘操作、只读态和当前分值文本。"
],
"en": [
"Add a five-level rating control with hover preview, click selection, keyboard support, read-only state, and visible score text."
]
},
"tip": {
"zh": "颜色和星形不能成为唯一信息来源，需要显示当前分值。",
"en": "Color and star fill should not be the only signal; display the current score in text."
},
"preview": {
"kind": "rating"
},
"pattern": null
},
{
"id": "cascader",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "级联选择",
"en": "Cascader"
},
"aliases": {
"zh": [
"级联选择",
"层级选择器",
"多级选择"
],
"en": [
"Cascader",
"hierarchical picker",
"multi-level select"
]
},
"description": {
"zh": "在存在父子关系的数据中逐级缩小范围并完成选择。",
"en": "A selector that narrows hierarchical data level by level before committing a value."
},
"prompt": {
"zh": [
"添加级联选择器，展示父级与子级两栏、当前路径、搜索、空结果和键盘导航。"
],
"en": [
"Add a cascader with parent and child columns, current path, search, empty results, and keyboard navigation."
]
},
"tip": {
"zh": "层级不深时优先使用普通选择器，避免增加不必要的选择步骤。",
"en": "Use a normal select for shallow data to avoid unnecessary selection steps."
},
"preview": {
"kind": "cascader"
},
"pattern": null
},
{
"id": "transfer",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "穿梭框",
"en": "Transfer"
},
"aliases": {
"zh": [
"穿梭框",
"双栏选择",
"列表穿梭"
],
"en": [
"Transfer",
"transfer list",
"dual-list selector"
]
},
"description": {
"zh": "在两个列表之间移动选中项目，适合批量分配权限或成员。",
"en": "Moves selected items between two lists for bulk assignment of permissions, members, or resources."
},
"prompt": {
"zh": [
"添加双栏穿梭框，支持搜索、多选、全部移动、撤销、已选数量和禁用项。"
],
"en": [
"Add a transfer list with search, multi-select, move all, undo, selected counts, and disabled items."
]
},
"tip": {
"zh": "条目很多时必须提供搜索和已选计数，否则双栏很难扫描。",
"en": "Large transfer lists require search and selected counts to remain scannable."
},
"preview": {
"kind": "transfer"
},
"pattern": null
},
{
"id": "form",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "表单",
"en": "Form"
},
"aliases": {
"zh": [
"表单",
"数据表单",
"提交表单"
],
"en": [
"Form",
"data form",
"submission form"
]
},
"description": {
"zh": "把标签、输入、校验和提交动作组织成完整的数据收集流程。",
"en": "A complete data collection flow combining labels, inputs, validation, and submission actions."
},
"prompt": {
"zh": [
"创建一个完整表单，包含清晰标签、必填标记、即时校验、提交中、成功、失败和防重复提交状态。"
],
"en": [
"Create a complete form with labels, required markers, inline validation, submitting, success, failure, and duplicate-submit protection."
]
},
"tip": {
"zh": "表单不是输入框的集合；字段顺序、错误位置和提交反馈必须形成完整路径。",
"en": "A form is more than a set of fields; order, error placement, and submission feedback must form a coherent flow."
},
"preview": {
"kind": "form"
},
"pattern": null
},
{
"id": "calendar",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "日历",
"en": "Calendar"
},
"aliases": {
"zh": [
"日历",
"月历",
"日期日历"
],
"en": [
"Calendar",
"month calendar",
"date calendar"
]
},
"description": {
"zh": "以月、周或日视图展示日期和事件，并允许选择日期。",
"en": "Displays dates and events in month, week, or day views and supports date selection."
},
"prompt": {
"zh": [
"添加月历组件，包含月份切换、今天、选中日、事件标记、禁用日期和键盘导航。"
],
"en": [
"Add a month calendar with month navigation, today, selected date, event markers, disabled dates, and keyboard navigation."
]
},
"tip": {
"zh": "日历用于浏览时间结构；只选择一个日期时，日期选择器通常更合适。",
"en": "Calendars are for browsing temporal structure; a date picker is usually better for selecting one date."
},
"preview": {
"kind": "calendar"
},
"pattern": null
},
{
"id": "comment",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "评论",
"en": "Comment"
},
"aliases": {
"zh": [
"评论",
"评论项",
"讨论回复"
],
"en": [
"Comment",
"comment item",
"discussion reply"
]
},
"description": {
"zh": "展示作者、正文、时间与回复操作的讨论单元。",
"en": "A discussion unit containing author, body, time, and reply actions."
},
"prompt": {
"zh": [
"添加评论组件，展示头像、作者、时间、正文、点赞、回复、编辑和删除权限状态。"
],
"en": [
"Add a comment with avatar, author, timestamp, body, like, reply, edit, and delete permission states."
]
},
"tip": {
"zh": "评论操作要区分本人和他人权限，并处理长文本和嵌套回复。",
"en": "Comment actions must respect ownership and handle long text and nested replies."
},
"preview": {
"kind": "comment"
},
"pattern": null
},
{
"id": "description-list",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "描述列表",
"en": "Descriptions"
},
"aliases": {
"zh": [
"描述列表",
"详情字段列表",
"只读信息组"
],
"en": [
"Descriptions",
"description list",
"read-only details"
]
},
"description": {
"zh": "用标签和值成组展示结构化的只读信息。",
"en": "Presents structured read-only information as grouped labels and values."
},
"prompt": {
"zh": [
"添加描述列表，展示状态、负责人、更新时间等字段，并处理长值、空值、复制和移动端堆叠。"
],
"en": [
"Add a descriptions list for status, owner, and update time, handling long values, empty values, copy actions, and mobile stacking."
]
},
"tip": {
"zh": "不要用描述列表伪装可编辑表单；可编辑内容应使用明确的编辑模式。",
"en": "Do not disguise editable data as a descriptions list; use an explicit edit mode."
},
"preview": {
"kind": "description-list"
},
"pattern": null
},
{
"id": "list",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "列表",
"en": "List"
},
"aliases": {
"zh": [
"列表",
"内容列表",
"列表项",
"list"
],
"en": [
"List",
"content list",
"list item",
"item list"
]
},
"description": {
"zh": "纵向展示结构相同的条目，并支持选择、操作和状态反馈。",
"en": "A vertical collection of structurally similar items with selection, actions, and state feedback."
},
"prompt": {
"zh": [
"添加可选择列表，包含标题、次要信息、当前项、悬停、空状态、加载和分页或虚拟滚动。"
],
"en": [
"Add a selectable list with title, secondary text, active item, hover, empty, loading, and pagination or virtualization."
]
},
"tip": {
"zh": "条目超过可扫描范围时，应提供搜索、分页或虚拟滚动。",
"en": "When the list exceeds a scannable size, add search, pagination, or virtualization."
},
"preview": {
"kind": "list"
},
"pattern": null
},
{
"id": "qr-code",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "二维码",
"en": "QR Code"
},
"aliases": {
"zh": [
"二维码",
"扫码入口",
"QR 码"
],
"en": [
"QR Code",
"scan code",
"QR"
]
},
"description": {
"zh": "把短链接或结构化文本编码为可被设备扫描的二维图形。",
"en": "Encodes a short link or structured text into a two-dimensional pattern that devices can scan."
},
"prompt": {
"zh": [
"生成二维码组件，保持高对比、静区和最小尺寸，支持下载、复制链接、失效状态和深浅背景测试。"
],
"en": [
"Create a QR code with high contrast, quiet zone, minimum size, download, copy link, expiry state, and light/dark background tests."
]
},
"tip": {
"zh": "二维码必须使用真实编码库生成，预览装饰不能替代可扫描结果。",
"en": "Use a proven encoding library; decorative mockups cannot replace a scannable result."
},
"preview": {
"kind": "qr-code"
},
"pattern": null
},
{
"id": "popconfirm",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "气泡确认框",
"en": "Popconfirm"
},
"aliases": {
"zh": [
"气泡确认框",
"就地确认",
"轻量确认"
],
"en": [
"Popconfirm",
"confirmation popover",
"inline confirmation"
]
},
"description": {
"zh": "在危险操作旁就地请求二次确认，避免打开完整模态框。",
"en": "Requests confirmation beside a risky action without opening a full modal."
},
"prompt": {
"zh": [
"添加气泡确认框，包含明确后果、取消、确认、键盘焦点、点击外部关闭和提交中状态。"
],
"en": [
"Add a popconfirm with clear consequences, cancel, confirm, keyboard focus, outside-click dismissal, and submitting state."
]
},
"tip": {
"zh": "只适合后果清楚的短操作；复杂决策应使用模态框解释。",
"en": "Use it for short, obvious consequences; complex decisions need a modal with more context."
},
"preview": {
"kind": "popconfirm"
},
"pattern": null
},
{
"id": "notification",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "通知提醒框",
"en": "Notification"
},
"aliases": {
"zh": [
"通知提醒框",
"角落通知",
"富通知"
],
"en": [
"Notification",
"corner notification",
"rich notification"
]
},
"description": {
"zh": "在页面角落展示包含标题、说明和操作的非阻塞反馈。",
"en": "A non-blocking corner message containing a title, description, and optional action."
},
"prompt": {
"zh": [
"添加通知提醒框，支持成功、警告和失败状态，提供关闭、操作按钮、自动消失与暂停计时。"
],
"en": [
"Add notifications for success, warning, and failure with dismiss, action, auto-close, and pause-on-hover behavior."
]
},
"tip": {
"zh": "需要立即处理的错误不能只靠自动消失的通知承载。",
"en": "Errors requiring immediate action should not rely only on auto-dismissing notifications."
},
"preview": {
"kind": "notification"
},
"pattern": null
},
{
"id": "result",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "结果页",
"en": "Result"
},
"aliases": {
"zh": [
"结果页",
"操作结果",
"完成状态"
],
"en": [
"Result",
"operation result",
"completion state"
]
},
"description": {
"zh": "在流程结束后集中说明成功、失败或待处理状态，并给出下一步。",
"en": "Summarizes success, failure, or pending status at the end of a flow and provides the next action."
},
"prompt": {
"zh": [
"添加结果状态，包含清晰标题、关键说明、主操作、次操作，以及成功、失败、处理中和重试状态。"
],
"en": [
"Add result states with a clear title, key explanation, primary and secondary actions, plus success, failure, pending, and retry variants."
]
},
"tip": {
"zh": "结果页必须回答发生了什么以及下一步做什么，不能只显示大图标。",
"en": "A result view must explain what happened and what to do next, not just show a large icon."
},
"preview": {
"kind": "result"
},
"pattern": null
},
{
"id": "fade-transition",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "淡入淡出",
"en": "Fade"
},
"aliases": {
"zh": [
"淡入淡出",
"透明度过渡",
"淡入动效"
],
"en": [
"Fade",
"opacity transition",
"fade in"
]
},
"description": {
"zh": "通过透明度变化让元素柔和出现或消失。",
"en": "Uses opacity changes to make an element appear or disappear smoothly."
},
"prompt": {
"zh": [
"为内容切换添加 180-240ms 淡入淡出，避免位移，并尊重 prefers-reduced-motion。"
],
"en": [
"Add a 180-240ms fade for content changes without movement and respect prefers-reduced-motion."
]
},
"tip": {
"zh": "淡入适合低强调变化，不能替代加载状态或页面结构变化。",
"en": "Fade suits low-emphasis changes and should not replace loading or structural transitions."
},
"preview": {
"kind": "fade-motion",
"title": {
"zh": "淡入淡出",
"en": "Fade transition"
}
},
"pattern": null
},
{
"id": "slide-in",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "滑入",
"en": "Slide In"
},
"aliases": {
"zh": [
"滑入",
"滑动进场",
"方向进场"
],
"en": [
"Slide In",
"directional entrance",
"slide entrance"
]
},
"description": {
"zh": "元素沿明确方向进入视区，用来表达空间来源，例如侧边栏从左侧来、详情面板从右侧来。",
"en": "An element enters from a meaningful direction, expressing spatial source such as a sidebar from the left or a detail panel from the right."
},
"prompt": {
"zh": [
"让侧边面板从触发源方向滑入，使用 220ms ease-out，并同步处理退出和 reduced motion。"
],
"en": [
"Slide the side panel from its trigger direction with 220ms ease-out, matching exit behavior and reduced motion."
]
},
"tip": {
"zh": "滑入的方向必须有理由；没有空间关系时，淡入或轻微上移通常更干净。",
"en": "Slide direction needs a reason. Without spatial logic, fade or a slight upward entrance is usually cleaner."
},
"preview": {
"kind": "slide-motion"
},
"pattern": null
},
{
"id": "scale-in",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "放大进场",
"en": "Scale In"
},
"aliases": {
"zh": [
"放大进场",
"缩放进场",
"弹性放大"
],
"en": [
"Scale In",
"scale entrance",
"spring scale"
]
},
"description": {
"zh": "元素从接近正常尺寸轻微缩放到稳定状态，常用于菜单、弹层和小面板。重点是 transform-origin 对齐触发源。",
"en": "An element gently scales from near-normal size to its settled state, often for menus, popovers, and small panels. The transform origin should match the trigger."
},
"prompt": {
"zh": [
"让弹出菜单从 0.96 缩放到 1，同时淡入，时长 160ms，transform-origin 对齐触发按钮。"
],
"en": [
"Scale the popover from 0.96 to 1 with a fade over 160ms and align transform-origin to the trigger."
]
},
"tip": {
"zh": "缩放起点接近 1，并对齐触发源，才能显得高级；从 0 弹出来会很廉价。",
"en": "Start near scale 1 and align origin to the trigger for polish; popping from 0 often feels cheap."
},
"preview": {
"kind": "scale-motion"
},
"pattern": null
},
{
"id": "stagger-animation",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "错落进场",
"en": "Staggered Entrance"
},
"aliases": {
"zh": [
"错落进场",
"依次进场",
"入场序列"
],
"en": [
"Staggered entrance",
"sequential entrance",
"entrance sequence"
]
},
"description": {
"zh": "错峰动画在入场场景里的具体用法：让一组卡片、菜单项或步骤按短延迟依次出现，但总时长要封顶。",
"en": "A specific entrance use of stagger motion: cards, menu items, or steps appear with short sequential delays, with a capped total duration."
},
"prompt": {
"zh": [
"让卡片列表依次淡入上移，每项延迟 60ms，总延迟封顶 300ms；reduced motion 下同时出现，不播放队列。"
],
"en": [
"Stagger list cards with fade and slight upward travel, 60ms per item, cap total delay at 300ms; under reduced motion, show them together without the sequence."
]
},
"tip": {
"zh": "它是入场动画的具体模式；如果只讲概念，用“错峰动画”词条更合适。",
"en": "This is a concrete entrance pattern; use the Stagger entry for the general concept."
},
"preview": {
"kind": "staggered-entrance"
},
"pattern": null
},
{
"id": "scroll-progress",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "滚动进度",
"en": "Scroll Progress"
},
"aliases": {
"zh": [
"滚动进度",
"阅读进度",
"页面进度条"
],
"en": [
"Scroll Progress",
"reading progress",
"page progress"
]
},
"description": {
"zh": "根据可滚动内容的位置展示当前阅读或浏览进度。",
"en": "Shows reading or browsing progress based on position within scrollable content."
},
"prompt": {
"zh": [
"在文章顶部添加滚动进度条，计算实际可滚动距离，处理页面高度变化和 reduced motion。"
],
"en": [
"Add a reading progress bar based on actual scrollable distance, handling document height changes and reduced motion."
]
},
"tip": {
"zh": "进度条适合长内容；短页面不需要额外的进度噪声。",
"en": "Progress indicators suit long content and add noise to short pages."
},
"preview": {
"kind": "scroll-progress"
},
"pattern": null
},
{
"id": "holy-grail-layout",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "圣杯布局",
"en": "Holy Grail Layout"
},
"aliases": {
"zh": [
"圣杯布局",
"三栏经典布局",
"页头三栏页脚"
],
"en": [
"Holy Grail Layout",
"three-column page",
"header columns footer"
]
},
"description": {
"zh": "由页头、页脚、主内容和左右侧栏组成的经典页面骨架。",
"en": "A classic page structure with header, footer, main content, and left and right sidebars."
},
"prompt": {
"zh": [
"实现响应式圣杯布局：桌面三栏、主内容优先，平板收起右栏，移动端改为单列且导航可访问。"
],
"en": [
"Implement a responsive holy grail layout with three desktop columns, main-content priority, collapsed right rail on tablet, and accessible single-column mobile flow."
]
},
"tip": {
"zh": "视觉顺序和 DOM 顺序要以主内容优先，不能让移动端先读完整侧栏。",
"en": "Keep main content early in DOM and reading order so mobile users do not traverse sidebars first."
},
"preview": {
"kind": "holy-grail"
},
"pattern": null
},
{
"id": "split-pane",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "分栏面板",
"en": "Split Pane"
},
"aliases": {
"zh": [
"分栏面板",
"可调分栏",
"分割视图"
],
"en": [
"Split Pane",
"resizable panes",
"split view"
]
},
"description": {
"zh": "由可拖动分隔条控制两侧宽度的并列工作区。",
"en": "A side-by-side workspace whose pane sizes are controlled by a draggable divider."
},
"prompt": {
"zh": [
"添加可调分栏，支持鼠标拖动、键盘方向键、最小宽度、双击复位和移动端上下堆叠。"
],
"en": [
"Add resizable split panes with pointer drag, keyboard arrows, minimum sizes, double-click reset, and stacked mobile layout."
]
},
"tip": {
"zh": "分隔条必须有可见命中区和键盘操作，不能只画一条细线。",
"en": "The divider needs a usable hit area and keyboard controls, not just a thin visual line."
},
"preview": {
"kind": "split-pane"
},
"pattern": null
},
{
"id": "list-detail-layout",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "列表-详情",
"en": "List-Detail"
},
"aliases": {
"zh": [
"列表-详情",
"主从布局",
"列表详情布局"
],
"en": [
"List-Detail",
"master detail",
"list detail layout"
]
},
"description": {
"zh": "左侧选择条目，右侧展示当前条目详情的高效工作布局。",
"en": "An efficient workspace where selecting an item in a list updates a detail pane."
},
"prompt": {
"zh": [
"创建列表-详情布局，保留当前选中项、加载和空状态；移动端从列表进入详情并提供返回路径。"
],
"en": [
"Create a list-detail layout with persistent selection, loading and empty states, plus a clear back path on mobile."
]
},
"tip": {
"zh": "移动端不能简单压缩双栏，应转为列表与详情之间的导航。",
"en": "On mobile, navigate between list and detail instead of squeezing both columns together."
},
"preview": {
"kind": "list-detail"
},
"pattern": null
},
{
"id": "media-object",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "图文左右",
"en": "Media Object"
},
"aliases": {
"zh": [
"图文左右",
"媒体对象",
"图文并排"
],
"en": [
"Media Object",
"media object pattern",
"image text row"
]
},
"description": {
"zh": "固定尺寸媒体与自适应正文并排的基础内容模式。",
"en": "A basic content pattern pairing fixed-size media with flexible text."
},
"prompt": {
"zh": [
"实现图文左右布局，图片保持固定比例，正文可伸缩，长标题截断，窄屏改为上下排列。"
],
"en": [
"Implement a media object with fixed-ratio media, flexible text, long-title truncation, and stacked narrow-screen layout."
]
},
"tip": {
"zh": "媒体和文字的视觉顺序要服务阅读，不要为了对称反复交错。",
"en": "Choose media order for reading flow rather than alternating rows for decoration."
},
"preview": {
"kind": "media-object"
},
"pattern": null
},
{
"id": "keyboard-shortcut",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "键盘快捷键",
"en": "Keyboard Shortcut"
},
"aliases": {
"zh": [
"键盘快捷键",
"快捷键",
"键盘操作",
"hotkey"
],
"en": [
"Keyboard Shortcut",
"hotkey",
"keyboard command"
]
},
"description": {
"zh": "让用户通过组合键触发常用操作的交互方式，常见于命令面板、编辑器和后台工具。",
"en": "An interaction that lets users trigger frequent actions with key combinations, common in command palettes, editors, and admin tools."
},
"prompt": {
"zh": [
"为这个界面补充键盘快捷键，显示可发现的快捷键提示，并处理焦点、冲突组合和禁用状态。"
],
"en": [
"Add keyboard shortcuts with discoverable hints, handling focus, conflicting combinations, and disabled states."
]
},
"tip": {
"zh": "快捷键要可发现，也要有鼠标路径；不要把核心操作只藏在键盘里。",
"en": "Shortcuts should be discoverable and still have a pointer alternative; do not hide core actions behind the keyboard only."
},
"preview": {
"kind": "keyboard-shortcut"
},
"pattern": null
},
{
"id": "touch-target",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "触控目标",
"en": "Touch Target"
},
"aliases": {
"zh": [
"触控目标",
"点击热区",
"触摸区域",
"tap target"
],
"en": [
"Touch Target",
"tap target",
"hit area"
]
},
"description": {
"zh": "移动端或触屏界面中，按钮、图标和列表项实际可点击的区域大小。",
"en": "The actual tappable area of buttons, icons, and list items on mobile or touch interfaces."
},
"prompt": {
"zh": [
"检查移动端触控目标，确保主要操作有足够命中区、相邻按钮有安全间距，并保留清晰反馈。"
],
"en": [
"Audit mobile touch targets so primary actions have enough hit area, neighboring controls have safe spacing, and feedback remains clear."
]
},
"tip": {
"zh": "视觉上小的图标也可以有更大的透明热区，别让用户精准点一个 16px 图标。",
"en": "A visually small icon can still have a larger invisible hit area; do not force users to tap a tiny 16px glyph."
},
"preview": {
"kind": "touch-target"
},
"pattern": null
},
{
"id": "loading-state",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "加载状态",
"en": "Loading State"
},
"aliases": {
"zh": [
"加载状态",
"等待状态",
"请求中状态",
"loading state"
],
"en": [
"Loading State",
"pending state",
"requesting state",
"busy state"
]
},
"description": {
"zh": "数据或资源尚未完成时给用户的临时反馈，可以是骨架屏、进度、占位或禁用操作。",
"en": "Temporary feedback shown while data or assets are still pending, such as skeletons, progress, placeholders, or disabled actions."
},
"prompt": {
"zh": [
"为列表和详情页补充加载状态，区分首次加载、局部刷新和提交中，并避免布局跳动。"
],
"en": [
"Add loading states for list and detail views, distinguishing initial load, partial refresh, and submitting while avoiding layout shift."
]
},
"tip": {
"zh": "加载状态是一整套界面状态；里面可以包含 spinner、骨架屏或加载动画。",
"en": "Loading state is the whole UI state; it can include spinners, skeletons, or loading animation."
},
"preview": {
"kind": "loading-state"
},
"pattern": null
},
{
"id": "error-state",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "错误状态",
"en": "Error State"
},
"aliases": {
"zh": [
"错误状态",
"报错状态",
"失败反馈"
],
"en": [
"Error State",
"failure state",
"error feedback"
]
},
"description": {
"zh": "操作失败或数据异常时的反馈状态，需要说明原因、影响范围和下一步行动。",
"en": "Feedback shown when an action fails or data is invalid, explaining cause, impact, and next action."
},
"prompt": {
"zh": [
"设计错误状态，写清楚失败原因、可重试操作、保留用户输入，并避免只显示红色警告。"
],
"en": [
"Design an error state that explains the failure, offers retry, preserves user input, and avoids showing only a red warning."
]
},
"tip": {
"zh": "错误文案要指向解决办法，不要只说“出错了”。",
"en": "Error copy should point to recovery, not only say something went wrong."
},
"preview": {
"kind": "error-state"
},
"pattern": null
},
{
"id": "success-state",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "成功状态",
"en": "Success State"
},
"aliases": {
"zh": [
"成功状态",
"完成反馈",
"提交成功"
],
"en": [
"Success State",
"completion feedback",
"success feedback"
]
},
"description": {
"zh": "操作完成后确认结果的反馈状态，常用于保存、发布、支付或导入完成。",
"en": "A confirmation state after an action completes, common for saving, publishing, payments, or imports."
},
"prompt": {
"zh": [
"为提交流程增加成功状态，说明已完成什么、下一步能做什么，以及是否需要自动返回或继续编辑。"
],
"en": [
"Add a success state to the submission flow explaining what completed, what to do next, and whether to return automatically or keep editing."
]
},
"tip": {
"zh": "成功状态要给用户落点，尤其是任务完成后下一步去哪里。",
"en": "A success state should give users a landing point, especially after a task completes."
},
"preview": {
"kind": "success-state"
},
"pattern": null
},
{
"id": "disabled-state",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "禁用状态",
"en": "Disabled State"
},
"aliases": {
"zh": [
"禁用状态",
"不可用状态",
"disabled"
],
"en": [
"Disabled State",
"unavailable state",
"disabled"
]
},
"description": {
"zh": "控件暂时不可操作时的状态，需要让用户理解为什么不可用以及如何恢复。",
"en": "A state for temporarily unavailable controls, helping users understand why and how to recover."
},
"prompt": {
"zh": [
"为按钮和表单项补充禁用状态，解释禁用原因，保留可读对比度，并提供恢复条件。"
],
"en": [
"Add disabled states for buttons and form controls, explaining why disabled, keeping readable contrast, and showing recovery conditions."
]
},
"tip": {
"zh": "禁用不等于变灰消失；关键操作最好说明条件。",
"en": "Disabled does not mean disappearing into gray; important actions should explain their conditions."
},
"preview": {
"kind": "disabled-state"
},
"pattern": null
},
{
"id": "empty-search",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "搜索空结果",
"en": "Empty Search Results"
},
"aliases": {
"zh": [
"搜索空结果",
"无搜索结果",
"空查询"
],
"en": [
"Empty Search Results",
"no results",
"empty query result"
]
},
"description": {
"zh": "搜索或筛选后没有匹配内容时的空状态，要帮助用户修改关键词或清除条件。",
"en": "An empty state after search or filtering, helping users change keywords or clear conditions."
},
"prompt": {
"zh": [
"为搜索无结果设计空状态，显示当前关键词、清除筛选入口、推荐关键词和返回全部列表操作。"
],
"en": [
"Design an empty search state with the current query, clear filters action, suggested keywords, and a way back to all results."
]
},
"tip": {
"zh": "搜索空结果和普通空状态不同，它要帮助用户调整查询。",
"en": "Empty search differs from a generic empty state because it should help users adjust the query."
},
"preview": {
"kind": "empty-search"
},
"pattern": null
},
{
"id": "inline-edit",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "内联编辑",
"en": "Inline Edit"
},
"aliases": {
"zh": [
"内联编辑",
"就地编辑",
"点击编辑"
],
"en": [
"Inline Edit",
"in-place edit",
"click to edit"
]
},
"description": {
"zh": "直接在原位置把文本或字段切换为可编辑状态，减少跳转和弹窗。",
"en": "A pattern that turns content into an editable field in place, reducing navigation and modals."
},
"prompt": {
"zh": [
"实现内联编辑，支持查看态、编辑态、保存中、失败回滚、Esc 取消和 Enter 保存。"
],
"en": [
"Implement inline edit with view, edit, saving, failure rollback, Esc cancel, and Enter save states."
]
},
"tip": {
"zh": "内联编辑必须有明显保存反馈，否则用户不知道改动是否生效。",
"en": "Inline edit needs clear save feedback so users know whether changes persisted."
},
"preview": {
"kind": "inline-edit"
},
"pattern": null
},
{
"id": "bulk-action",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "批量操作",
"en": "Bulk Action"
},
"aliases": {
"zh": [
"批量操作",
"批处理",
"批量编辑"
],
"en": [
"Bulk Action",
"batch action",
"bulk edit"
]
},
"description": {
"zh": "对多个选中项一次性执行归档、删除、移动、导出等操作的工具模式。",
"en": "A tool pattern for applying actions such as archive, delete, move, or export to multiple selected items."
},
"prompt": {
"zh": [
"为数据列表添加批量操作栏，显示已选数量、常用动作、危险操作确认和清除选择。"
],
"en": [
"Add a bulk action bar to a data list showing selected count, common actions, destructive confirmation, and clear selection."
]
},
"tip": {
"zh": "批量操作要把影响范围说清楚，危险动作必须二次确认。",
"en": "Bulk actions must clarify scope, and destructive actions need confirmation."
},
"preview": {
"kind": "bulk-action"
},
"pattern": null
},
{
"id": "row-selection",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "行选择",
"en": "Row Selection"
},
"aliases": {
"zh": [
"行选择",
"表格选择",
"多选行"
],
"en": [
"Row Selection",
"table selection",
"select rows"
]
},
"description": {
"zh": "在表格或列表中选择单行或多行，通常服务于批量操作和对比查看。",
"en": "Selecting one or more rows in a table or list, usually for bulk actions or comparison."
},
"prompt": {
"zh": [
"为表格增加行选择，支持全选、半选、跨页选择提示、键盘焦点和选中数量。"
],
"en": [
"Add row selection to a table with select all, indeterminate state, cross-page hints, keyboard focus, and selected count."
]
},
"tip": {
"zh": "全选要说清是当前页还是全部结果，否则容易误操作。",
"en": "Select all must clarify whether it means current page or all results to avoid mistakes."
},
"preview": {
"kind": "row-selection"
},
"pattern": null
},
{
"id": "column-visibility",
"category": "ui",
"category_label": {
"zh": "UI 组件",
"en": "UI Components"
},
"title": {
"zh": "列显示控制",
"en": "Column Visibility"
},
"aliases": {
"zh": [
"列显示控制",
"隐藏列",
"表格列设置"
],
"en": [
"Column Visibility",
"hide columns",
"table column settings"
]
},
"description": {
"zh": "允许用户显示、隐藏或固定表格列，以适应不同工作场景。",
"en": "Allows users to show, hide, or pin table columns for different work contexts."
},
"prompt": {
"zh": [
"给数据表格添加列显示控制，支持隐藏非关键列、固定关键列、恢复默认和保存用户偏好。"
],
"en": [
"Add column visibility controls to a data table, supporting hidden optional columns, pinned key columns, reset defaults, and saved preferences."
]
},
"tip": {
"zh": "列设置适合信息密度高的后台，不适合只有三四列的简单表格。",
"en": "Column settings fit dense admin tables, not simple tables with only a few columns."
},
"preview": {
"kind": "column-visibility"
},
"pattern": null
},
{
"id": "sticky-header",
"category": "layout",
"category_label": {
"zh": "布局",
"en": "Layout"
},
"title": {
"zh": "吸顶表头",
"en": "Sticky Header"
},
"aliases": {
"zh": [
"吸顶表头",
"固定表头",
"粘性头部"
],
"en": [
"Sticky Header",
"fixed table header",
"sticky top bar"
]
},
"description": {
"zh": "滚动长表格或长页面时保持标题、列名或操作栏可见的布局方式。",
"en": "A layout technique that keeps headings, column labels, or action bars visible while scrolling long pages or tables."
},
"prompt": {
"zh": [
"为长表格增加吸顶表头，处理横向滚动、阴影分隔、移动端降级和遮挡问题。"
],
"en": [
"Add a sticky header to a long table, handling horizontal scroll, shadow separation, mobile fallback, and overlap issues."
]
},
"tip": {
"zh": "吸顶元素要注意层级和遮挡，尤其是弹窗、下拉和顶部导航同时存在时。",
"en": "Sticky elements need careful layering, especially with modals, dropdowns, and top navigation."
},
"preview": {
"kind": "sticky-header"
},
"pattern": null
},
{
"id": "infinite-scroll",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "无限滚动",
"en": "Infinite Scroll"
},
"aliases": {
"zh": [
"无限滚动",
"滚动加载",
"瀑布加载"
],
"en": [
"Infinite Scroll",
"load on scroll",
"endless list"
]
},
"description": {
"zh": "用户滚动到底部附近时自动加载更多内容的浏览模式。",
"en": "A browsing pattern that loads more content automatically as users approach the end of a list."
},
"prompt": {
"zh": [
"实现无限滚动列表，包含加载哨兵、结束提示、错误重试、滚动位置恢复和可访问分页替代。"
],
"en": [
"Implement infinite scroll with a loading sentinel, end message, retry on error, scroll restoration, and accessible pagination fallback."
]
},
"tip": {
"zh": "无限滚动适合浏览，不适合需要精确定位和批量管理的数据。",
"en": "Infinite scroll suits browsing, not precise locating or bulk management."
},
"preview": {
"kind": "infinite-scroll"
},
"pattern": null
},
{
"id": "virtual-list",
"category": "dev",
"category_label": {
"zh": "开发",
"en": "Development"
},
"title": {
"zh": "虚拟列表",
"en": "Virtual List"
},
"aliases": {
"zh": [
"虚拟列表",
"虚拟滚动",
"长列表性能"
],
"en": [
"Virtual List",
"virtual scrolling",
"windowed list"
]
},
"description": {
"zh": "只渲染可视区域附近的列表项，用来提升超长列表的性能。",
"en": "A performance pattern that renders only items near the viewport for very long lists."
},
"prompt": {
"zh": [
"把超长列表改为虚拟列表，保留可访问行语义、动态高度处理、滚动定位和空状态。"
],
"en": [
"Convert the long list to a virtual list while preserving accessible row semantics, dynamic heights, scroll targeting, and empty states."
]
},
"tip": {
"zh": "虚拟列表是性能方案，不是视觉样式；要确认真的有大量数据。",
"en": "A virtual list is a performance solution, not a visual style; confirm the data volume justifies it."
},
"preview": {
"kind": "virtual-list"
},
"pattern": null
},
{
"id": "optimistic-ui",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "乐观更新",
"en": "Optimistic UI"
},
"aliases": {
"zh": [
"乐观更新",
"乐观 UI",
"先更新后确认"
],
"en": [
"Optimistic UI",
"optimistic update",
"instant feedback"
]
},
"description": {
"zh": "用户操作后先更新界面，再等待服务端确认；失败时需要回滚或修正。",
"en": "An interaction that updates the UI immediately after user action, then confirms with the server and rolls back or corrects on failure."
},
"prompt": {
"zh": [
"为点赞或状态切换实现乐观更新，包含即时反馈、请求中状态、失败回滚和重试入口。"
],
"en": [
"Implement optimistic updates for likes or status toggles with instant feedback, pending state, failure rollback, and retry."
]
},
"tip": {
"zh": "乐观更新适合低风险操作；付款、删除这类高风险动作不要盲目乐观。",
"en": "Optimistic UI suits low-risk actions; do not use it blindly for payments or destructive deletes."
},
"preview": {
"kind": "optimistic-ui"
},
"pattern": null
},
{
"id": "autosave",
"category": "form",
"category_label": {
"zh": "表单",
"en": "Forms"
},
"title": {
"zh": "自动保存",
"en": "Autosave"
},
"aliases": {
"zh": [
"自动保存",
"草稿保存",
"实时保存"
],
"en": [
"Autosave",
"draft save",
"auto draft"
]
},
"description": {
"zh": "用户编辑时自动保存草稿或变更，减少手动提交压力。",
"en": "Automatically saves drafts or changes while users edit, reducing reliance on manual submission."
},
"prompt": {
"zh": [
"为编辑器添加自动保存，包含防抖、保存中、已保存、离线失败、手动重试和离开页面提醒。"
],
"en": [
"Add autosave to the editor with debounce, saving, saved, offline failure, manual retry, and leave-page warning states."
]
},
"tip": {
"zh": "自动保存必须显示保存状态，否则用户会不敢离开页面。",
"en": "Autosave must show save status, or users will hesitate to leave the page."
},
"preview": {
"kind": "autosave"
},
"pattern": null
},
{
"id": "undo-redo",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "撤销重做",
"en": "Undo / Redo"
},
"aliases": {
"zh": [
"撤销重做",
"撤销",
"重做",
"历史操作"
],
"en": [
"Undo Redo",
"undo",
"redo",
"history stack"
]
},
"description": {
"zh": "允许用户回退或重新应用最近操作，常见于编辑器、看板和设计工具。",
"en": "Allows users to reverse or reapply recent actions, common in editors, boards, and design tools."
},
"prompt": {
"zh": [
"为编辑操作增加撤销/重做，设计历史栈、禁用状态、快捷键和操作提示。"
],
"en": [
"Add undo and redo to editing actions with a history stack, disabled states, shortcuts, and operation feedback."
]
},
"tip": {
"zh": "撤销重做要明确作用范围，是当前字段、当前页面，还是整份文档。",
"en": "Undo/redo should clarify scope: current field, current page, or the whole document."
},
"preview": {
"kind": "undo-redo"
},
"pattern": null
},
{
"id": "permission-state",
"category": "dev",
"category_label": {
"zh": "开发",
"en": "Development"
},
"title": {
"zh": "权限状态",
"en": "Permission State"
},
"aliases": {
"zh": [
"权限状态",
"无权限",
"权限控制",
"访问控制"
],
"en": [
"Permission State",
"no permission",
"access control"
]
},
"description": {
"zh": "根据用户角色或授权范围展示可见、只读、禁用或不可访问状态。",
"en": "Shows visible, read-only, disabled, or inaccessible states based on user role or authorization scope."
},
"prompt": {
"zh": [
"为后台页面补充权限状态，区分隐藏、只读、禁用和无权限页，并说明角色与操作范围。"
],
"en": [
"Add permission states to the admin page, distinguishing hidden, read-only, disabled, and no-access views with roles and action scope."
]
},
"tip": {
"zh": "权限不是只在后端拦截；前端也要给用户合理解释和安全边界。",
"en": "Permissions are not only backend checks; the frontend should explain boundaries safely."
},
"preview": {
"kind": "permission-state"
},
"pattern": null
},
{
"id": "audit-log",
"category": "dev",
"category_label": {
"zh": "开发",
"en": "Development"
},
"title": {
"zh": "操作日志",
"en": "Audit Log"
},
"aliases": {
"zh": [
"操作日志",
"审计日志",
"操作记录",
"追踪记录"
],
"en": [
"Audit Log",
"audit trail",
"operation log",
"accountability log"
]
},
"description": {
"zh": "记录谁在何时对什么对象做了什么操作，常用于后台、权限和协作场景。",
"en": "A record of who did what to which object and when, common in admin, permission, and collaboration contexts."
},
"prompt": {
"zh": [
"添加操作日志面板，展示操作者、时间、对象、动作、前后变化，并支持筛选和空状态。"
],
"en": [
"Add an audit log panel showing actor, time, object, action, before/after changes, with filtering and empty state."
]
},
"tip": {
"zh": "操作日志用于追责和审计；产品版本发布记录应使用更新日志。",
"en": "Audit logs support accountability and review; product release notes belong in changelog."
},
"preview": {
"kind": "audit-log"
},
"pattern": null
},
{
"id": "responsive-preview",
"category": "dev",
"category_label": {
"zh": "开发",
"en": "Development"
},
"title": {
"zh": "响应式预览",
"en": "Responsive Preview"
},
"aliases": {
"zh": [
"响应式预览",
"设备预览",
"断点预览"
],
"en": [
"Responsive Preview",
"device preview",
"breakpoint preview"
]
},
"description": {
"zh": "在同一工具中切换桌面、平板、移动端视口，检查布局和内容是否适配。",
"en": "A tool view for switching desktop, tablet, and mobile viewports to inspect layout and content adaptation."
},
"prompt": {
"zh": [
"为预览区增加响应式预览模式，支持桌面/平板/手机切换、宽度标签、缩放和溢出检查。"
],
"en": [
"Add responsive preview modes with desktop/tablet/mobile switching, width labels, scaling, and overflow checks."
]
},
"tip": {
"zh": "响应式预览不是只缩小画布，还要检查文字换行、触控目标和横向滚动。",
"en": "Responsive preview is not only shrinking the canvas; check wrapping, touch targets, and horizontal scroll."
},
"preview": {
"kind": "responsive-preview"
},
"pattern": null
},
{
"id": "user-flow",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "用户流程",
"en": "User Flow"
},
"aliases": {
"zh": [
"用户流程",
"使用路径",
"任务流程",
"user flow"
],
"en": [
"User Flow",
"task flow",
"usage path"
]
},
"description": {
"zh": "用户从进入页面到完成目标的一系列步骤，用来判断页面是否顺路。",
"en": "The sequence of steps a user takes from entry to task completion, used to judge whether a page feels direct."
},
"prompt": {
"zh": [
"根据用户目标梳理用户流程，列出入口、关键决策点、失败分支、完成反馈和返回路径。"
],
"en": [
"Map the user flow from goal to completion, including entry points, decision points, failure branches, completion feedback, and return paths."
]
},
"tip": {
"zh": "用户流程关注行动顺序，不是页面截图罗列。",
"en": "User flow is about action order, not a gallery of page screenshots."
},
"preview": {
"kind": "user-flow"
},
"pattern": null
},
{
"id": "information-architecture",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "信息架构",
"en": "Information Architecture"
},
"aliases": {
"zh": [
"信息架构",
"IA",
"内容结构",
"导航结构"
],
"en": [
"Information Architecture",
"IA",
"content structure",
"navigation structure"
]
},
"description": {
"zh": "把内容、导航和页面层级组织成用户能理解的结构。",
"en": "The organization of content, navigation, and page hierarchy into a structure users can understand."
},
"prompt": {
"zh": [
"为这个产品梳理信息架构，输出一级/二级导航、内容分组、入口优先级和命名建议。"
],
"en": [
"Create the information architecture for this product, including primary and secondary navigation, content groups, entry priorities, and naming suggestions."
]
},
"tip": {
"zh": "信息架构要先解决“东西放哪”，再讨论卡片怎么画。",
"en": "Information architecture answers where things belong before discussing how cards look."
},
"preview": {
"kind": "information-architecture"
},
"pattern": null
},
{
"id": "content-hierarchy",
"category": "structure",
"category_label": {
"zh": "页面结构",
"en": "Page Structure"
},
"title": {
"zh": "内容层级",
"en": "Content Hierarchy"
},
"aliases": {
"zh": [
"内容层级",
"信息层级",
"阅读优先级"
],
"en": [
"Content Hierarchy",
"information hierarchy",
"reading priority"
]
},
"description": {
"zh": "通过标题、摘要、辅助信息和操作位置安排用户阅读顺序。",
"en": "Arranges reading order through headings, summaries, supporting details, and action placement."
},
"prompt": {
"zh": [
"优化内容层级，明确主标题、关键信息、辅助说明、操作入口和弱化内容的视觉权重。"
],
"en": [
"Improve content hierarchy by defining the main heading, key information, supporting copy, action entry, and lower-priority content weight."
]
},
"tip": {
"zh": "层级不是字体越大越好，而是让用户先看到该看到的。",
"en": "Hierarchy is not simply bigger type; it makes users see what matters first."
},
"preview": {
"kind": "content-hierarchy"
},
"pattern": null
},
{
"id": "progressive-disclosure",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "渐进披露",
"en": "Progressive Disclosure"
},
"aliases": {
"zh": [
"渐进披露",
"逐步展示",
"高级选项"
],
"en": [
"Progressive Disclosure",
"show more",
"advanced options"
]
},
"description": {
"zh": "先展示必要内容，把复杂或低频选项放到用户需要时再展开。",
"en": "Shows essential content first and reveals complex or low-frequency options only when needed."
},
"prompt": {
"zh": [
"把复杂设置改成渐进披露：默认只显示必要字段，高级选项可展开，并保留当前配置摘要。"
],
"en": [
"Refactor complex settings into progressive disclosure: show essential fields by default, reveal advanced options on demand, and keep a configuration summary."
]
},
"tip": {
"zh": "渐进披露不是把东西藏起来，而是减少初始决策压力。",
"en": "Progressive disclosure is not hiding things; it reduces initial decision pressure."
},
"preview": {
"kind": "progressive-disclosure"
},
"pattern": null
},
{
"id": "affordance",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "可供性",
"en": "Affordance"
},
"aliases": {
"zh": [
"可供性",
"可操作暗示",
"看得出能点"
],
"en": [
"Affordance",
"interaction cue",
"perceived action"
]
},
"description": {
"zh": "界面元素通过形状、状态和反馈暗示用户它可以做什么。",
"en": "How an interface element suggests what action it supports through shape, state, and feedback."
},
"prompt": {
"zh": [
"检查页面可供性，让可点击、可拖拽、可展开和只读元素在视觉上有明确差异。"
],
"en": [
"Audit affordance so clickable, draggable, expandable, and read-only elements are visually distinct."
]
},
"tip": {
"zh": "如果用户看不出能不能点，说明可供性不足。",
"en": "If users cannot tell whether something is actionable, affordance is weak."
},
"preview": {
"kind": "affordance"
},
"pattern": null
},
{
"id": "onboarding-flow",
"category": "interaction",
"category_label": {
"zh": "交互",
"en": "Interaction"
},
"title": {
"zh": "引导流程",
"en": "Onboarding Flow"
},
"aliases": {
"zh": [
"引导流程",
"新用户流程",
"首次使用流程",
"入门流程"
],
"en": [
"Onboarding Flow",
"new user flow",
"first-run flow",
"getting started flow"
]
},
"description": {
"zh": "帮助新用户理解产品价值、完成基础设置并到达第一个成功时刻。",
"en": "A flow that helps new users understand value, complete setup, and reach their first successful moment."
},
"prompt": {
"zh": [
"设计新用户引导流程，包含欢迎、关键设置、示例数据、跳过入口和第一个成功反馈。"
],
"en": [
"Design an onboarding flow with welcome, key setup, sample data, skip option, and first success feedback."
]
},
"tip": {
"zh": "引导不是说明书，要带用户完成一个真实任务。",
"en": "Onboarding is not documentation; it should help users complete a real task."
},
"preview": {
"kind": "onboarding-flow"
},
"pattern": null
},
{
"id": "screenshot-feedback",
"category": "dev",
"category_label": {
"zh": "开发",
"en": "Development"
},
"title": {
"zh": "截图反馈",
"en": "Screenshot Feedback"
},
"aliases": {
"zh": [
"截图反馈",
"截图标注",
"视觉反馈"
],
"en": [
"Screenshot Feedback",
"visual feedback",
"annotated screenshot"
]
},
"description": {
"zh": "用截图圈出问题并配合文字说明，让 AI 或开发者更准确地修界面。",
"en": "Uses annotated screenshots plus text notes so AI or developers can fix UI issues more accurately."
},
"prompt": {
"zh": [
"基于这张截图生成修复说明，按位置、问题、期望结果和验收标准输出，不要泛泛说“更好看”。"
],
"en": [
"Generate fix instructions from this screenshot by position, issue, expected result, and acceptance criteria instead of vague “make it nicer” notes."
]
},
"tip": {
"zh": "截图反馈要定位具体区域，最好说明“现在怎样”和“应该怎样”。",
"en": "Screenshot feedback should locate the exact area and explain current versus expected behavior."
},
"preview": {
"kind": "screenshot-feedback"
},
"pattern": null
},
{
"id": "prompt-variable",
"category": "dev",
"category_label": {
"zh": "开发",
"en": "Development"
},
"title": {
"zh": "提示词变量",
"en": "Prompt Variable"
},
"aliases": {
"zh": [
"提示词变量",
"变量占位",
"模板变量",
"prompt 变量"
],
"en": [
"Prompt Variable",
"template variable",
"prompt slot",
"variable placeholder"
]
},
"description": {
"zh": "在提示词模板中预留可替换字段，例如目标用户、页面类型、风格和输出格式。",
"en": "Replaceable fields in a prompt template, such as audience, page type, style, and output format."
},
"prompt": {
"zh": [
"把这段提示词改成可复用模板，用变量标出页面类型、用户目标、数据字段、风格和技术栈。"
],
"en": [
"Turn this prompt into a reusable template with variables for page type, user goal, data fields, style, and tech stack."
]
},
"tip": {
"zh": "提示词变量是模板里的可替换槽位，不要和输入框 placeholder 混为一谈。",
"en": "Prompt variables are replaceable slots in a template, not form placeholders."
},
"preview": {
"kind": "prompt-variable"
},
"pattern": null
},
{
"id": "context-packet",
"category": "dev",
"category_label": {
"zh": "开发",
"en": "Development"
},
"title": {
"zh": "上下文包",
"en": "Context Packet"
},
"aliases": {
"zh": [
"上下文包",
"任务上下文",
"交接信息"
],
"en": [
"Context Packet",
"task context",
"handoff packet"
]
},
"description": {
"zh": "给 AI 或协作者的一组必要背景：目标、现状、约束、文件、验收和不要做什么。",
"en": "A concise set of background for AI or collaborators: goal, current state, constraints, files, acceptance, and what not to do."
},
"prompt": {
"zh": [
"整理一个上下文包，包含目标、当前页面问题、相关文件、设计约束、已尝试方案和验收标准。"
],
"en": [
"Prepare a context packet with goal, current page issues, related files, design constraints, tried approaches, and acceptance criteria."
]
},
"tip": {
"zh": "上下文包是为了减少 AI 猜测，不是把所有资料一股脑塞进去。",
"en": "A context packet reduces guessing; it is not a dump of every available file."
},
"preview": {
"kind": "context-packet"
},
"pattern": null
},
{
"id": "mock-data",
"category": "dev",
"category_label": {
"zh": "开发",
"en": "Development"
},
"title": {
"zh": "模拟数据",
"en": "Mock Data"
},
"aliases": {
"zh": [
"模拟数据",
"假数据",
"示例数据"
],
"en": [
"Mock Data",
"fake data",
"sample data"
]
},
"description": {
"zh": "用于开发和预览的代表性数据，帮助暴露空值、长文本、异常和边界情况。",
"en": "Representative data for development and previews that exposes empty values, long text, anomalies, and edge cases."
},
"prompt": {
"zh": [
"为这个组件生成模拟数据，包含正常、空值、长文本、异常数值和多语言内容。"
],
"en": [
"Generate mock data for this component covering normal, empty, long text, abnormal values, and multilingual content."
]
},
"tip": {
"zh": "好模拟数据要能暴露布局问题，不能只有完美短文本。",
"en": "Good mock data should reveal layout issues, not only perfect short text."
},
"preview": {
"kind": "mock-data"
},
"pattern": null
},
{
"id": "state-machine",
"category": "dev",
"category_label": {
"zh": "开发",
"en": "Development"
},
"title": {
"zh": "状态机",
"en": "State Machine"
},
"aliases": {
"zh": [
"状态机",
"状态流转",
"状态图"
],
"en": [
"State Machine",
"state transition",
"state chart"
]
},
"description": {
"zh": "用明确状态和事件描述界面如何从加载、成功、失败、编辑等状态之间切换。",
"en": "Models how an interface transitions among states such as loading, success, failure, and editing through events."
},
"prompt": {
"zh": [
"为这个交互写状态机，列出所有状态、触发事件、允许转移、禁止转移和默认状态。"
],
"en": [
"Write a state machine for this interaction listing states, triggering events, allowed transitions, forbidden transitions, and default state."
]
},
"tip": {
"zh": "状态复杂时先画状态机，比直接写 if/else 更稳。",
"en": "When states get complex, model a state machine before writing if/else logic."
},
"preview": {
"kind": "state-machine"
},
"pattern": null
},
{
"id": "edge-case",
"category": "dev",
"category_label": {
"zh": "开发",
"en": "Development"
},
"title": {
"zh": "边界情况",
"en": "Edge Case"
},
"aliases": {
"zh": [
"边界情况",
"极端情况",
"异常输入"
],
"en": [
"Edge Case",
"corner case",
"edge input"
]
},
"description": {
"zh": "不常见但可能发生的输入、状态或数据组合，容易导致布局或逻辑问题。",
"en": "Uncommon but possible inputs, states, or data combinations that often break layout or logic."
},
"prompt": {
"zh": [
"列出这个组件的边界情况，覆盖空数据、超长文本、权限不足、网络失败、移动端窄屏和重复提交。"
],
"en": [
"List edge cases for this component covering empty data, long text, missing permission, network failure, narrow mobile, and duplicate submit."
]
},
"tip": {
"zh": "边界情况不是悲观，是为了提前发现会让用户卡住的地方。",
"en": "Edge cases are not pessimism; they reveal places users might get stuck."
},
"preview": {
"kind": "edge-case"
},
"pattern": null
},
{
"id": "fallback-ui",
"category": "dev",
"category_label": {
"zh": "开发",
"en": "Development"
},
"title": {
"zh": "兜底界面",
"en": "Fallback UI"
},
"aliases": {
"zh": [
"兜底界面",
"降级界面",
"fallback UI"
],
"en": [
"Fallback UI",
"fallback view",
"graceful fallback"
]
},
"description": {
"zh": "在资源缺失、接口失败、浏览器能力不足时仍能提供基本可用体验的界面。",
"en": "A view that keeps the experience basically usable when assets are missing, APIs fail, or browser capabilities are limited."
},
"prompt": {
"zh": [
"为这个功能设计兜底界面，处理接口失败、图片丢失、权限不足和浏览器不支持，并给出恢复入口。"
],
"en": [
"Design fallback UI for API failure, missing image, missing permission, and unsupported browser, with recovery actions."
]
},
"tip": {
"zh": "兜底不是错误页复制粘贴，而是让用户知道还能做什么。",
"en": "Fallback is not a copied error page; it tells users what remains possible."
},
"preview": {
"kind": "fallback-ui"
},
"pattern": null
},
{
"id": "regression-check",
"category": "dev",
"category_label": {
"zh": "开发",
"en": "Development"
},
"title": {
"zh": "回归检查",
"en": "Regression Check"
},
"aliases": {
"zh": [
"回归检查",
"回归测试",
"改完再验"
],
"en": [
"Regression Check",
"regression test",
"post-change check"
]
},
"description": {
"zh": "修改后确认旧功能、旧布局和关键路径没有被破坏的检查。",
"en": "A post-change check that existing features, layouts, and key paths still work."
},
"prompt": {
"zh": [
"根据这次改动生成回归检查清单，覆盖桌面/移动端、空状态、错误状态、键盘操作和主要用户流程。"
],
"en": [
"Generate a regression checklist for this change covering desktop/mobile, empty states, error states, keyboard use, and main user flows."
]
},
"tip": {
"zh": "回归检查要围绕受影响路径，不是把所有页面都机械点一遍。",
"en": "Regression checks should follow affected paths, not mechanically click every page."
},
"preview": {
"kind": "regression-check"
},
"pattern": null
},
{
"id": "component-api",
"category": "dev",
"category_label": {
"zh": "开发",
"en": "Development"
},
"title": {
"zh": "组件 API",
"en": "Component API"
},
"aliases": {
"zh": [
"组件 API",
"组件参数",
"props 设计"
],
"en": [
"Component API",
"component props",
"props design"
]
},
"description": {
"zh": "组件对外暴露的属性、事件、插槽和状态约定，决定它是否容易复用。",
"en": "The props, events, slots, and state conventions exposed by a component, determining how reusable it is."
},
"prompt": {
"zh": [
"为这个组件设计 Component API，列出 props、事件、默认值、受控/非受控模式和无障碍要求。"
],
"en": [
"Design the component API with props, events, defaults, controlled/uncontrolled modes, and accessibility requirements."
]
},
"tip": {
"zh": "组件 API 要表达能力边界，别把内部实现细节暴露成参数。",
"en": "A component API should express capability boundaries, not leak internal implementation details."
},
"preview": {
"kind": "component-api"
},
"pattern": null
},
{
"id": "design-system",
"category": "visual",
"category_label": {
"zh": "视觉",
"en": "Visual Design"
},
"title": {
"zh": "设计系统",
"en": "Design System"
},
"aliases": {
"zh": [
"设计系统",
"Design System",
"组件规范",
"视觉规范"
],
"en": [
"Design System",
"component guidelines",
"visual system"
]
},
"description": {
"zh": "由组件、设计 Token、使用规范和质量标准组成的一套产品界面语言。",
"en": "A product interface language made of components, design tokens, usage guidelines, and quality standards."
},
"prompt": {
"zh": [
"为项目整理轻量设计系统，包含颜色、字号、间距、圆角、组件状态、使用禁忌和示例。"
],
"en": [
"Create a lightweight design system with colors, type scale, spacing, radius, component states, usage rules, and examples."
]
},
"tip": {
"zh": "设计系统不是大而全的文档，先保证高频组件一致。",
"en": "A design system is not necessarily huge documentation; start by making high-frequency components consistent."
},
"preview": {
"kind": "design-system"
},
"pattern": null
},
{
"id": "flat-design",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "平面设计系统",
"en": "Flat Design System"
},
"aliases": {
"zh": [
"扁平化",
"平面设计",
"flat design",
"纯色 UI"
],
"en": [
"Flat Design",
"flat UI",
"solid color UI"
]
},
"description": {
"zh": "去掉纹理、复杂渐变和拟物深度，用纯色、几何形状、清晰图标和直接排版建立高效界面。",
"en": "An efficient style that removes texture, complex gradients, and skeuomorphic depth, using solid color, geometry, clear icons, and direct typography."
},
"prompt": {
"zh": [
"请以「平面设计系统 / Flat Design」为核心方向重设计这个界面。\n\n角色：你是一名擅长现代产品界面、图标系统和清晰信息层级的 UI/UX 设计师兼前端工程师。\n\n设计理念：平面设计追求清楚、快速和可扩展，不依赖真实材质或复杂阴影表达层级。\n\n适用场景：移动应用、SaaS、教育产品、工具类页面、设计系统和需要高性能的产品。\n\n视觉要求：使用纯色块、几何形状、清晰图标、有限阴影或无阴影、明确字号层级和一致间距；颜色要服务状态和分组。\n\n交互要求：hover/focus/selected/disabled 需要通过色块、边框、文本和图标清楚表达；不要因为无阴影导致按钮不可识别。\n\n输出格式：先给组件系统和色彩角色，再给布局、图标、按钮、表单、状态、响应式和反例。"
],
"en": [
"Redesign this interface around a \"Flat Design\" direction.\n\nRole: You are a UI/UX designer and frontend engineer skilled in modern product UI, icon systems, and clear hierarchy.\n\nPrinciple: Flat design values clarity, speed, and scalability. It does not depend on realistic material or complex shadows to express hierarchy.\n\nUse cases: mobile apps, SaaS, education products, tools, design systems, and performance-sensitive products.\n\nVisual requirements: Use solid colors, geometric shapes, clear icons, little or no shadow, clear type hierarchy, and consistent spacing. Color should support state and grouping.\n\nInteraction: Hover, focus, selected, and disabled states must be clear through color blocks, borders, text, and icons. Do not let buttons become invisible because there is no depth.\n\nReturn: component system, color roles, layout, icons, buttons, forms, states, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "平面设计不是没有层级；它用颜色角色、排版和组件状态建立层级。",
"en": "Flat design is not hierarchy-free. It uses color roles, typography, and component states for hierarchy."
},
"preview": {
"kind": "term-lab",
"variant": "flat",
"templates": 3,
"title": {
"zh": "平面设计系统",
"en": "Flat Design System"
},
"subtitle": {
"zh": "纯色、几何和零装饰层级",
"en": "Solid colors, geometry, no decorative depth"
},
"palette": [
"#3498db",
"#2ecc71",
"#f1c40f",
"#e74c3c",
"#2c3e50"
],
"chips": [
{
"label": {
"zh": "纯色",
"en": "Solid color"
},
"tone": "brand"
},
{
"label": {
"zh": "无阴影",
"en": "No shadow"
},
"tone": "muted"
},
{
"label": {
"zh": "几何",
"en": "Geometry"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "ink-wash-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "水墨风格",
"en": "Ink Wash Style"
},
"aliases": {
"zh": [
"水墨",
"国风水墨",
"ink wash",
"东方美学"
],
"en": [
"Ink wash",
"Chinese ink style",
"oriental aesthetic"
]
},
"description": {
"zh": "以留白、墨色层次、竖排文字和克制朱红点缀表达东方意境。",
"en": "A style using whitespace, ink-value layers, vertical type, and restrained red accents to express poetic atmosphere."
},
"prompt": {
"zh": [
"请以「水墨风格 / Ink Wash」为核心方向重设计这个界面。\n\n角色：你是一名懂东方美学、现代 UI 和前端落地的视觉设计师。\n\n设计理念：水墨风的高级感来自留白、墨色层次和克制点睛，不是把页面铺满传统纹样。\n\n适用场景：文化内容、艺术作品集、茶/香/文旅品牌、诗性博客、东方美学产品和慢节奏阅读。不适合高频后台和强转化电商。\n\n视觉要求：以米白或宣纸色为底，使用黑、灰、淡墨层次建立空间；朱红只用于印章、重点状态或小面积行动；允许竖排标题、书法感标题和淡墨图形，但正文必须现代可读。\n\n交互要求：动效应轻、慢、像墨色展开或纸张翻动；状态反馈仍要清楚，不要用过浅墨色表达关键错误。\n\n输出格式：先给内容气质和留白结构，再给墨色层级、字体、图片/纹理、点睛色、组件状态、响应式和反例。"
],
"en": [
"Redesign this interface around an \"Ink Wash\" direction.\n\nRole: You are a visual designer skilled in East Asian aesthetics, modern UI, and frontend implementation.\n\nPrinciple: Ink wash polish comes from whitespace, ink value, and restrained accents, not covering the page with traditional patterns.\n\nUse cases: cultural content, art portfolios, tea/incense/travel brands, poetic blogs, East Asian aesthetic products, and slow reading. Avoid high-frequency admin tools and aggressive ecommerce.\n\nVisual requirements: Use warm paper tones, black/gray ink value layers, and red only for seals, key states, or small actions. Vertical titles and calligraphic headings are allowed, but body text must stay modern and readable.\n\nInteraction: Motion should be light and slow, like ink spreading or paper turning. Critical states must remain clear, not too pale.\n\nReturn: content mood, whitespace structure, ink scale, typography, image/texture treatment, accent color, component states, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "水墨风要先留白，再点墨；纹样越多越容易廉价。",
"en": "Ink wash starts with whitespace, then ink accents. More patterns usually make it cheaper."
},
"preview": {
"kind": "term-lab",
"variant": "ink-wash",
"templates": 2,
"title": {
"zh": "水墨风格",
"en": "Ink Wash Style"
},
"subtitle": {
"zh": "留白、墨色层次和一点朱红",
"en": "Whitespace, ink layers, one red accent"
},
"palette": [
"#f6f2ea",
"#111111",
"#737373",
"#c6283a",
"#c8a84e"
],
"chips": [
{
"label": {
"zh": "留白",
"en": "Whitespace"
},
"tone": "muted"
},
{
"label": {
"zh": "墨色",
"en": "Ink"
},
"tone": "muted"
},
{
"label": {
"zh": "朱红点缀",
"en": "Red accent"
},
"tone": "warm"
}
]
},
"pattern": null
},
{
"id": "kawaii-minimal",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "可爱极简",
"en": "Kawaii Minimal"
},
"aliases": {
"zh": [
"可爱极简",
"kawaii minimal",
"柔软可爱",
"治愈风"
],
"en": [
"Kawaii Minimal",
"soft cute UI",
"gentle playful UI"
]
},
"description": {
"zh": "把日系可爱元素和现代极简结合，用柔和粉彩、圆润形状和轻量动效传达友好感。",
"en": "A gentle style combining kawaii details with modern minimal UI through pastel color, rounded shapes, and light motion."
},
"prompt": {
"zh": [
"请以「可爱极简 / Kawaii Minimal」为核心方向重设计这个界面。\n\n角色：你是一名擅长治愈系产品、日系轻量视觉和可用性的 UI/UX 设计师。\n\n设计理念：可爱极简是在现代产品骨架里放入柔软情绪，不是堆贴纸、表情和糖果色。\n\n适用场景：习惯养成、生活工具、轻量教育、个人记录、创意工具、女性向或年轻用户产品。不适合严肃金融、法律和高压工作台。\n\n视觉要求：使用低饱和粉彩、圆润 surface、友好微文案、少量可爱符号和柔和图标；留白要干净，组件状态要清楚。\n\n交互要求：hover/active 可加入轻微弹性和柔和反馈；空状态和成功状态可以更温暖，但错误提示必须直接可懂。\n\n输出格式：先给用户情绪和任务，再给配色、圆角、图标、文案语气、状态、动效、响应式和反例。"
],
"en": [
"Redesign this interface around a \"Kawaii Minimal\" direction.\n\nRole: You are a UI/UX designer skilled in gentle products, Japanese-inspired light visuals, and usability.\n\nPrinciple: Kawaii minimal adds soft emotion to a modern product structure. It is not stickers, emoji overload, or candy saturation.\n\nUse cases: habit apps, lifestyle tools, light education, personal journals, creative tools, and younger or lifestyle-oriented products. Avoid serious finance, legal, and high-pressure workbenches.\n\nVisual requirements: Use low-saturation pastels, rounded surfaces, friendly microcopy, a few cute symbols, and soft icons. Keep whitespace clean and component states clear.\n\nInteraction: Hover/active may use slight elasticity and gentle feedback. Empty and success states can be warm, but errors must be direct and understandable.\n\nReturn: user emotion and task, palette, radius, icons, copy tone, states, motion, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "可爱极简要保留产品骨架，少量可爱元素才会显得高级。",
"en": "Kawaii minimal needs a product structure first. A few cute details feel more refined than many."
},
"preview": {
"kind": "term-lab",
"variant": "kawaii-minimal",
"templates": 2,
"title": {
"zh": "可爱极简",
"en": "Kawaii Minimal"
},
"subtitle": {
"zh": "粉彩、圆润和友好文案",
"en": "Pastel, rounded surfaces, friendly copy"
},
"palette": [
"#fff9f0",
"#fff0a7",
"#e9c9fb",
"#ffffff",
"#64748b"
],
"chips": [
{
"label": {
"zh": "粉彩",
"en": "Pastel"
},
"tone": "soft"
},
{
"label": {
"zh": "治愈",
"en": "Gentle"
},
"tone": "muted"
},
{
"label": {
"zh": "低饱和",
"en": "Low saturation"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "industrial-design-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "工业设计风格",
"en": "Industrial Design Style"
},
"aliases": {
"zh": [
"工业设计",
"工业风",
"industrial UI",
"机械面板"
],
"en": [
"Industrial design",
"industrial UI",
"machine panel UI"
]
},
"description": {
"zh": "借用机械面板、工程网格、深色金属和功能主义排版的强实用风格。",
"en": "A functional style borrowing from machine panels, engineering grids, dark metal surfaces, and utilitarian typography."
},
"prompt": {
"zh": [
"请以「工业设计风格 / Industrial Design」为核心方向重设计这个界面。\n\n角色：你是一名懂硬件控制台、工程系统和功能主义排版的 UI/UX 设计师。\n\n设计理念：工业风的重点是可靠、耐用、可读和可操作，不是脏旧贴图或随意噪点。\n\n适用场景：监控系统、开发者工具、硬件面板、能源/制造/物流系统、技术品牌和实验设备界面。不适合生活方式、儿童或情感化产品。\n\n视觉要求：使用深色金属 surface、工程网格、硬边框、等宽或窄体字体、琥珀/绿色状态灯和清晰模块分区；所有数据和警报要像控制台一样明确。\n\n交互要求：状态灯、开关、告警、日志和图表要有明确层级；hover/focus 用边框、状态灯或机械位移表达。\n\n输出格式：先给控制台信息架构，再给网格、材质、字体、状态色、组件、警报、响应式和反例。"
],
"en": [
"Redesign this interface around an \"Industrial Design\" direction.\n\nRole: You are a UI/UX designer familiar with hardware consoles, engineering systems, and functional typography.\n\nPrinciple: Industrial style is about reliability, durability, readability, and operation, not dirty textures or random noise.\n\nUse cases: monitoring systems, developer tools, hardware panels, energy/manufacturing/logistics systems, technical brands, and lab equipment UI. Avoid lifestyle, children's, or emotional products.\n\nVisual requirements: Use dark metal surfaces, engineering grids, hard borders, monospace or condensed type, amber/green status lights, and clear modules. Data and alerts should read like a console.\n\nInteraction: Status lights, switches, alerts, logs, and charts need clear hierarchy. Hover/focus can use borders, lights, or mechanical offset.\n\nReturn: console information architecture, grid, material, typography, status colors, components, alerts, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "工业风要像可靠设备，而不是脏旧海报；功能清晰比噪点重要。",
"en": "Industrial UI should feel like reliable equipment, not a dirty poster. Function beats noise."
},
"preview": {
"kind": "term-lab",
"variant": "industrial",
"templates": 4,
"title": {
"zh": "工业设计风格",
"en": "Industrial Design Style"
},
"subtitle": {
"zh": "工程网格、金属 surface 和状态灯",
"en": "Engineering grid, metal surface, status light"
},
"palette": [
"#171717",
"#2a2a2a",
"#d7cdb7",
"#f4a018"
],
"chips": [
{
"label": {
"zh": "工程网格",
"en": "Grid"
},
"tone": "muted"
},
{
"label": {
"zh": "功能主义",
"en": "Functional"
},
"tone": "brand"
},
{
"label": {
"zh": "深色金属",
"en": "Dark metal"
},
"tone": "dark"
}
]
},
"pattern": null
},
{
"id": "light-effects-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "光效风格",
"en": "Light Effects Style"
},
"aliases": {
"zh": [
"光效",
"发光效果",
"light effects",
"glow UI"
],
"en": [
"Light effects",
"glow UI",
"luminous UI"
]
},
"description": {
"zh": "通过小面积辉光、光源方向和明暗层次制造沉浸式视觉焦点。",
"en": "A style using small-area glow, light direction, and value contrast to create immersive focus."
},
"prompt": {
"zh": [
"请以「光效风格 / Light Effects」为核心方向重设计这个界面。\n\n角色：你是一名擅长光源、明暗层次和可读性的视觉 UI 设计师兼前端工程师。\n\n设计理念：光效的目的不是让所有东西发亮，而是建立唯一焦点、空间深度和情绪氛围。\n\n适用场景：AI 产品、音乐/视频、创意工具、活动页、沉浸式展示和高端科技品牌。不适合长文阅读和密集表格。\n\n视觉要求：先确定唯一主光源；辉光只用于标题、主行动、当前状态或关键对象；背景低噪声，正文必须有实色或高对比备份。\n\n交互要求：hover 可增强局部光晕或边缘亮度；动效要慢而少，避免闪烁。移动端降低 blur 和 shadow 数量。\n\n输出格式：先给光源和焦点策略，再给背景、发光规则、颜色、文字可读性、状态、动效、性能和反例。"
],
"en": [
"Redesign this interface around a \"Light Effects\" direction.\n\nRole: You are a visual UI designer and frontend engineer skilled in light source, value, and readability.\n\nPrinciple: Light effects are not for making everything glow. They create one focal point, depth, and mood.\n\nUse cases: AI products, music/video, creative tools, campaigns, immersive showcases, and premium tech brands. Avoid long reading and dense tables.\n\nVisual requirements: Define one primary light source. Use glow only for headings, primary actions, current state, or key objects. Keep the background low-noise and provide solid/high-contrast text surfaces.\n\nInteraction: Hover can enhance local glow or edge light. Motion should be slow and limited, never flickery. Reduce blur and shadow layers on mobile.\n\nReturn: light source and focus strategy, background, glow rules, color, text readability, states, motion, performance, and anti-patterns."
]
},
"tip": {
"zh": "光效要有主光源和焦点，满屏发光会立刻变廉价。",
"en": "Light effects need a source and a focal point. Everything glowing quickly feels cheap."
},
"preview": {
"kind": "term-lab",
"variant": "light-effects",
"templates": 2,
"title": {
"zh": "光效风格",
"en": "Light Effects Style"
},
"subtitle": {
"zh": "唯一光源、小面积辉光和可读文字",
"en": "One light source, small glow, readable text"
},
"palette": [
"#172024",
"#8257ff",
"#6bd8d6",
"#ffffff"
],
"chips": [
{
"label": {
"zh": "主光源",
"en": "Light source"
},
"tone": "brand"
},
{
"label": {
"zh": "小面积",
"en": "Small area"
},
"tone": "muted"
},
{
"label": {
"zh": "可读",
"en": "Readable"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "dark-luxury",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "暗黑奢华",
"en": "Dark Luxury"
},
"aliases": {
"zh": [
"暗黑奢华",
"高级黑金",
"quiet luxury",
"奢侈品风格"
],
"en": [
"Dark luxury",
"quiet luxury",
"black gold UI",
"luxury UI"
]
},
"description": {
"zh": "用深色 surface、细金线、衬线标题和克制留白传达高级与稀缺感。",
"en": "A refined style using dark surfaces, fine gold lines, serif headings, and restrained whitespace."
},
"prompt": {
"zh": [
"请以「暗黑奢华 / Dark Luxury」为核心方向重设计这个界面。\n\n角色：你是一名熟悉高级品牌、精品电商和克制视觉系统的 UI/UX 设计师。\n\n设计理念：暗黑奢华靠比例、材质、留白和细节建立稀缺感，不靠大面积金色和廉价反光。\n\n适用场景：高端品牌、精品电商、艺术展、会员产品、摄影作品集、奢侈服务。不适合儿童教育、公共服务和高密度后台。\n\n视觉要求：使用暖黑或深棕 surface、象牙白正文、细金线、衬线标题、小字号标签和大量留白；金色只做分隔、边框或小面积状态。\n\n交互要求：动效要慢、稳、克制；hover 可以用细线显现、轻微位移或低亮度金色，不要强闪和高饱和。\n\n输出格式：先给品牌气质和内容层级，再给色彩、字体、线条、材质、组件状态、动效、响应式和反例。"
],
"en": [
"Redesign this interface around a \"Dark Luxury\" direction.\n\nRole: You are a UI/UX designer familiar with premium brands, boutique commerce, and restrained visual systems.\n\nPrinciple: Dark luxury creates scarcity through proportion, material, whitespace, and detail, not large gold gradients or cheap shine.\n\nUse cases: premium brands, boutique ecommerce, art exhibitions, membership products, photography portfolios, and luxury services. Avoid children's education, public services, and dense admin tools.\n\nVisual requirements: Use warm black or deep brown surfaces, ivory text, fine gold lines, serif headings, small labels, and generous whitespace. Gold should appear only in dividers, borders, or small states.\n\nInteraction: Motion should be slow, stable, and restrained. Hover can reveal fine lines, slight offset, or low-brightness gold, not strong flashing or saturation.\n\nReturn: brand mood, content hierarchy, palette, typography, lines, material, component states, motion, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "暗黑奢华的重点是细节比例，不是黑底加金色渐变。",
"en": "Dark luxury is about proportion and detail, not black backgrounds with gold gradients."
},
"preview": {
"kind": "term-lab",
"variant": "dark-luxury",
"templates": 2,
"title": {
"zh": "暗黑奢华",
"en": "Dark Luxury"
},
"subtitle": {
"zh": "暖黑、细金线和安静留白",
"en": "Warm black, fine gold lines, quiet whitespace"
},
"palette": [
"#11100e",
"#f6ead2",
"#c6a15b",
"#4c3c20"
],
"chips": [
{
"label": {
"zh": "细金线",
"en": "Fine gold"
},
"tone": "warm"
},
{
"label": {
"zh": "衬线标题",
"en": "Serif"
},
"tone": "muted"
},
{
"label": {
"zh": "克制",
"en": "Restrained"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "aurora-gradient-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "极光渐变风格",
"en": "Aurora Gradient Style"
},
"aliases": {
"zh": [
"极光渐变",
"柔和渐变",
"aurora UI",
"朦胧渐变"
],
"en": [
"Aurora gradient",
"soft gradient UI",
"aurora UI"
]
},
"description": {
"zh": "用低饱和多色渐变、模糊色团和半透明 surface 制造轻盈氛围。",
"en": "A light atmospheric style using low-saturation multicolor gradients, blurred color fields, and translucent surfaces."
},
"prompt": {
"zh": [
"请以「极光渐变 / Aurora Gradient」为核心方向重设计这个界面。\n\n角色：你是一名擅长低饱和渐变、氛围背景和清晰内容层的 UI/UX 设计师。\n\n设计理念：极光渐变负责情绪和空间，不负责承载正文。真正可用的内容必须落在清晰 surface 上。\n\n适用场景：AI 产品、创意工具、个人仪表盘、冥想健康、轻量营销页和需要轻盈未来感的产品。不适合高密度表格和严肃文档。\n\n视觉要求：使用低饱和青绿、蓝紫、粉色的模糊色团；背景要柔和，主体内容用白色或半透明高对比 surface；渐变不要直接放在正文后面。\n\n交互要求：可使用慢速环境动效或 hover 光晕，但必须尊重 reduced-motion；移动端减少模糊层，避免性能问题。\n\n输出格式：先给背景氛围和内容层关系，再给渐变色、surface、字体、状态、动效、性能、响应式和反例。"
],
"en": [
"Redesign this interface around an \"Aurora Gradient\" direction.\n\nRole: You are a UI/UX designer skilled in low-saturation gradients, atmospheric backgrounds, and clear content surfaces.\n\nPrinciple: Aurora gradients provide mood and space, not body text contrast. Usable content must sit on clear surfaces.\n\nUse cases: AI products, creative tools, personal dashboards, wellness/meditation, lightweight landing pages, and airy futuristic products. Avoid dense tables and serious documents.\n\nVisual requirements: Use low-saturation teal, blue-violet, and pink blurred color fields. Keep the background soft and place content on white or high-contrast translucent surfaces. Do not put body text directly on gradients.\n\nInteraction: Slow ambient motion or hover glow is acceptable, but respect reduced-motion. Reduce blur layers on mobile for performance.\n\nReturn: atmosphere/content-layer relationship, gradient colors, surfaces, typography, states, motion, performance, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "极光渐变只做氛围，正文必须回到清晰容器里。",
"en": "Aurora gradients are atmosphere. Body content still needs a clear surface."
},
"preview": {
"kind": "term-lab",
"variant": "aurora",
"templates": 2,
"title": {
"zh": "极光渐变风格",
"en": "Aurora Gradient Style"
},
"subtitle": {
"zh": "低饱和多色氛围和清晰内容层",
"en": "Soft multicolor atmosphere and clear content surfaces"
},
"palette": [
"#eef8f5",
"#8bdccf",
"#f5c2d8",
"#b8c7ff",
"#ffffff"
],
"chips": [
{
"label": {
"zh": "低饱和",
"en": "Low saturation"
},
"tone": "muted"
},
{
"label": {
"zh": "氛围背景",
"en": "Atmosphere"
},
"tone": "muted"
},
{
"label": {
"zh": "清晰 surface",
"en": "Clear surface"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "biophilic-design",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "亲自然设计",
"en": "Biophilic Design"
},
"aliases": {
"zh": [
"亲自然设计",
"自然疗愈风",
"biophilic UI",
"绿植界面"
],
"en": [
"Biophilic Design",
"nature-inspired UI",
"plant UI",
"wellness UI"
]
},
"description": {
"zh": "把植物、有机曲线、自然光感和低饱和大地色带入界面，营造平静、疗愈、可呼吸的产品体验。",
"en": "A nature-inspired UI direction that brings plants, organic curves, daylight, and muted earth tones into calm, breathable interfaces."
},
"prompt": {
"zh": [
"请以「亲自然设计 / Biophilic Design」为核心方向重设计这个界面。\n\n角色：你是一位亲自然 UI/UX 设计师，擅长把植物、有机形状、自然光和纸纤维质感转成现代数字界面。\n\n适用场景：健康、冥想、可持续品牌、户外、环保、电商生活方式和慢节奏内容产品。不适合高压交易后台、赛博游戏界面和需要强刺激转化的活动页。\n\n视觉要求：使用苔绿、叶绿、土褐、天光蓝和暖白；布局多用有机曲线、柔和渐变和充足留白；植物线稿只能做轻点缀，不能变成花边。文字必须保持高对比。\n\n材质要求：优先用纸纤维、叶脉细纹、柔和阴影和自然光斑；少用玻璃、强发光和高饱和霓虹。可以加入微噪点，但不要做脏。\n\n交互要求：hover 像光线扫过一样轻微提亮，active 轻微下沉，动效控制在 150-220ms，整体节奏安静。\n\n输出格式：给出适用判断、色盘、布局、纹理、植物元素、组件状态、动效 token、响应式策略和反例边界。"
],
"en": [
"Redesign this interface around a Biophilic Design direction.\n\nRole: You are a UI/UX designer who translates plants, organic forms, daylight, and paper-like texture into modern digital interfaces.\n\nUse cases: wellness, meditation, sustainability, outdoor, eco commerce, lifestyle, and slow content products. Avoid high-pressure trading dashboards, cyber game UI, and aggressive conversion pages.\n\nVisual rules: Use moss green, leaf green, earth brown, sky blue, and warm white. Prefer organic curves, soft gradients, and generous whitespace. Botanical linework should be a quiet accent, not decoration overload. Keep text contrast strong.\n\nMaterial rules: Use paper fiber, subtle vein texture, soft shadows, and daylight patches. Avoid heavy glass, neon glow, and saturated color. Micro grain is acceptable when clean.\n\nInteraction: Hover gently brightens like moving light; active slightly presses down; motion should sit around 150-220ms.\n\nReturn: fit assessment, palette, layout, texture, plant details, component states, motion tokens, responsive strategy, and anti-patterns."
]
},
"tip": {
"zh": "亲自然不是把页面铺满叶子，而是用自然光、低饱和色和有机节奏降低压力。",
"en": "Biophilic UI is not leaf decoration everywhere. It uses light, muted nature tones, and organic rhythm to lower pressure."
},
"preview": {
"kind": "term-lab",
"variant": "biophilic",
"templates": 3,
"title": {
"zh": "亲自然设计",
"en": "Biophilic Design"
},
"subtitle": {
"zh": "植物线稿、自然光和可呼吸留白",
"en": "Botanical linework, daylight, and breathable whitespace"
},
"palette": [
"#f6f4ea",
"#6f8f5f",
"#b7c49a",
"#d8b98f",
"#8ec5d6"
],
"chips": [
{
"label": {
"zh": "苔绿",
"en": "Moss"
},
"tone": "brand"
},
{
"label": {
"zh": "纸纤维",
"en": "Paper"
},
"tone": "muted"
},
{
"label": {
"zh": "自然光",
"en": "Daylight"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "material-design",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "材料设计",
"en": "Material Design"
},
"aliases": {
"zh": [
"谷歌设计系统",
"材料设计",
"Material Design",
"material UI"
],
"en": [
"Material Design",
"Google design system",
"material UI"
]
},
"description": {
"zh": "以真实材料隐喻、海拔层级、明确状态和系统化组件为核心的 Google 设计语言。",
"en": "Google’s material metaphor system built around elevation, surfaces, states, motion, and systematic components."
},
"prompt": {
"zh": [
"请以「材料设计 / Material Design」为核心方向重设计这个界面。\n\n角色：你是一名熟悉 Google Material 体系、可访问性和组件状态的产品 UI 设计师。\n\n设计理念：界面由材料化界面层组成，通过海拔层级、容器色、状态层和动效表达层级，而不是随意堆阴影。\n\n适用场景：移动应用、工具型产品、表单流程、设置页、跨平台产品和需要成熟组件规范的业务系统。\n\n视觉要求：建立主色、辅助色、界面层、错误色等语义色彩角色；卡片、导航、列表、悬浮操作按钮、表单和按钮使用一致圆角与间距；阴影只表达真实层级。\n\n交互要求：所有按钮、列表项、输入框都要有悬停、聚焦、按下、禁用、加载和错误状态；动效应体现进入、退出、容器转换和状态反馈。\n\n输出格式：给出色彩角色、界面层/海拔层级、组件清单、状态层、动效、无障碍、移动端适配和避免把材料设计做成普通卡片流的反例。"
],
"en": [
"Redesign this interface around Material Design.\n\nRole: You are a product UI designer familiar with Google Material, accessibility, and component states.\n\nPrinciple: The interface is made of material surfaces. Elevation, container color, state layers, and motion express hierarchy; shadows are not decoration.\n\nUse cases: mobile apps, tools, forms, settings, cross-platform products, and business systems that need mature component rules.\n\nVisual rules: Define primary, secondary, surface, and error roles. Cards, navigation, lists, FABs, forms, and buttons must share radius and spacing logic. Shadows only communicate real elevation.\n\nInteraction: Buttons, list items, and inputs need hover, focus, pressed, disabled, loading, and error states. Motion should support enter, exit, container transform, and state feedback.\n\nReturn: color roles, surface/elevation, component set, state layers, motion, accessibility, mobile adaptation, and anti-patterns."
]
},
"tip": {
"zh": "Material 的重点是 surface、elevation 和状态层，不是“Google 蓝 + 阴影卡片”。",
"en": "Material is surface, elevation, and state layers, not just Google blue and shadow cards."
},
"preview": {
"kind": "term-lab",
"variant": "material",
"templates": 3,
"title": {
"zh": "材料设计",
"en": "Material Design"
},
"subtitle": {
"zh": "界面层、海拔层级和完整状态",
"en": "Surfaces, elevation, and complete states"
},
"palette": [
"#f8fafc",
"#6750a4",
"#eaddff",
"#1d1b20",
"#b3261e"
],
"chips": [
{
"label": {
"zh": "海拔层级",
"en": "Elevation"
},
"tone": "brand"
},
{
"label": {
"zh": "FAB",
"en": "FAB"
},
"tone": "muted"
},
{
"label": {
"zh": "状态层",
"en": "State layer"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "fluent-design",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "微软 Fluent 设计 2",
"en": "Fluent Design 2"
},
"aliases": {
"zh": [
"微软设计系统",
"微软 Fluent 设计",
"Fluent 2",
"Fluent Design",
"亚克力和云母材质"
],
"en": [
"Fluent Design",
"Fluent 2",
"Microsoft design system",
"Acrylic Mica"
]
},
"description": {
"zh": "微软现代设计语言，强调 Mica/Acrylic 材质、柔和层级、清晰控件和桌面生产力体验。",
"en": "Microsoft’s modern design language using Mica/Acrylic materials, soft hierarchy, clear controls, and productivity-focused UI."
},
"prompt": {
"zh": [
"请以「微软 Fluent 设计 2 / Fluent Design 2」为核心方向重设计这个界面。\n\n角色：你是一名熟悉微软生态、桌面软件和生产力工具的 UI/UX 设计师。\n\n设计理念：Fluent 不是玻璃拟态的换皮，而是用云母背景、亚克力浮层、清晰控件、轻层级和系统化状态创造稳定的工作界面。\n\n适用场景：桌面应用、管理工具、设置中心、文档工具、协作产品和企业生产力软件。不适合强娱乐品牌和夸张营销页。\n\n视觉要求：使用低饱和浅灰蓝界面层、细边框、8-12px 圆角、柔和阴影和明确控件边界；局部可用亚克力浮层，主体内容不要透明。\n\n交互要求：悬停使用轻填充，按下使用轻微下沉，焦点环必须清晰；菜单、列表、命令栏和通知要有 Windows 式可扫描结构。\n\n输出格式：给出应用框架、导航/命令栏、云母背景/亚克力浮层使用范围、色彩、控件状态、无障碍和反例。"
],
"en": [
"Redesign this interface around Fluent Design 2.\n\nRole: You are a UI/UX designer familiar with the Microsoft ecosystem, desktop software, and productivity tools.\n\nPrinciple: Fluent is not a glass skin. It uses Mica/Acrylic backgrounds, clear controls, soft hierarchy, and systematic states to create stable work interfaces.\n\nUse cases: desktop apps, admin tools, settings centers, document tools, collaboration products, and enterprise productivity software. Avoid loud entertainment brands and exaggerated marketing pages.\n\nVisual rules: Use muted gray-blue surfaces, fine borders, 8-12px radius, soft shadows, and visible control boundaries. Acrylic may appear in overlays; primary content should not be transparent.\n\nInteraction: Hover uses subtle fill, pressed slightly sinks, focus rings are visible. Menus, lists, command bars, and notifications should feel scan-friendly.\n\nReturn: app frame, navigation/command bar, Mica/Acrylic scope, palette, control states, accessibility, and anti-patterns."
]
},
"tip": {
"zh": "Fluent 更像安静的桌面工作系统，材质要辅助层级，不要抢正文。",
"en": "Fluent feels like a calm desktop work system. Materials support hierarchy and should not compete with content."
},
"preview": {
"kind": "term-lab",
"variant": "fluent",
"templates": 3,
"title": {
"zh": "微软 Fluent 设计 2",
"en": "Fluent Design 2"
},
"subtitle": {
"zh": "云母背景、命令栏和生产力控件",
"en": "Mica background, command bar, productivity controls"
},
"palette": [
"#f5f7fb",
"#e8eef7",
"#2563eb",
"#1f2937",
"#ffffff"
],
"chips": [
{
"label": {
"zh": "Mica",
"en": "Mica"
},
"tone": "muted"
},
{
"label": {
"zh": "命令栏",
"en": "Command bar"
},
"tone": "brand"
},
{
"label": {
"zh": "细边框",
"en": "Fine border"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "skeuomorphism-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "经典拟物化",
"en": "Skeuomorphism"
},
"aliases": {
"zh": [
"经典拟物",
"拟物化",
"skeuomorphic UI",
"真实材质界面"
],
"en": [
"Skeuomorphism",
"skeuomorphic UI",
"realistic material UI"
]
},
"description": {
"zh": "借用真实物体的材质、按钮、旋钮、纸张或仪表隐喻，让用户凭现实经验理解操作。",
"en": "A realistic material style that borrows physical objects, knobs, paper, panels, and instruments to make interactions familiar."
},
"prompt": {
"zh": [
"请以「经典拟物化 / Skeuomorphism」为核心方向重设计这个界面。\n\n角色：你是一位理解真实材质、物理隐喻和现代可用性的 UI 设计师。\n\n设计理念：拟物化用现实世界的对象帮助用户理解功能，但现代实现必须克制，不能退回厚重旧时代皮肤。\n\n适用场景：音乐制作、相机、阅读、收藏、教育工具、仪表盘和需要强物理隐喻的专业工具。不适合普通 SaaS 表格和严肃后台。\n\n视觉要求：选择一个清晰物件隐喻，如纸张、旋钮、仪表、磁带、钱包或设备面板；使用真实材质、细节高光、接缝和阴影，但保持文字清晰和布局现代。\n\n交互要求：按钮要有按压反馈，旋钮/滑杆要显示刻度，开关要有物理状态；触控目标不能因为装饰变小。\n\n输出格式：给出物件隐喻、材质、光源、控件状态、可访问性、性能和避免廉价贴图/过度写实的反例。"
],
"en": [
"Redesign this interface around Skeuomorphism.\n\nRole: You are a UI designer who understands real-world materials, physical metaphors, and modern usability.\n\nPrinciple: Skeuomorphism helps users understand function through familiar objects, but modern use must be restrained, not a heavy old skin.\n\nUse cases: music production, cameras, reading, collecting, education tools, instruments, and professional tools that benefit from physical metaphors. Avoid normal SaaS tables and serious admin screens.\n\nVisual rules: Pick one clear object metaphor such as paper, knobs, gauges, tape, wallet, or device panel. Use material, highlights, seams, and shadows while keeping text readable and layout modern.\n\nInteraction: Buttons need press feedback, knobs/sliders need ticks, switches need physical state. Decoration must not shrink targets.\n\nReturn: object metaphor, material, light source, control states, accessibility, performance, and anti-patterns."
]
},
"tip": {
"zh": "拟物化最怕贴图堆叠；先选一个真实隐喻，再让细节服务操作。",
"en": "Skeuomorphism fails when texture piles up. Pick one metaphor and make details serve interaction."
},
"preview": {
"kind": "term-lab",
"variant": "skeuomorphic",
"templates": 2,
"title": {
"zh": "经典拟物化",
"en": "Skeuomorphism"
},
"subtitle": {
"zh": "真实材质、旋钮刻度和按压反馈",
"en": "Real material, knob ticks, and press feedback"
},
"palette": [
"#efe4d2",
"#6f4e37",
"#d8b47c",
"#2f2a25",
"#f8f1e7"
],
"chips": [
{
"label": {
"zh": "物理隐喻",
"en": "Metaphor"
},
"tone": "brand"
},
{
"label": {
"zh": "刻度",
"en": "Ticks"
},
"tone": "muted"
},
{
"label": {
"zh": "按压",
"en": "Pressed"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "scroll-narrative-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "滚动叙事",
"en": "Scroll Narrative"
},
"aliases": {
"zh": [
"滚动叙事",
"滚动讲故事",
"scroll storytelling",
"滚动动画页面"
],
"en": [
"Scroll Narrative",
"scroll storytelling",
"scrollytelling"
]
},
"description": {
"zh": "把页面滚动设计成分镜叙事，通过章节、固定画面、进度和渐进揭示引导用户理解复杂内容。",
"en": "A scrollytelling pattern that uses chapters, pinned scenes, progress, and staged reveal to explain complex content."
},
"prompt": {
"zh": [
"请以「滚动叙事 / Scroll Narrative」为核心方向重设计这个页面。\n\n角色：你是一名擅长交互叙事、产品发布页和前端动效的 UI 设计师。\n\n设计理念：滚动不是装饰动画触发器，而是把复杂内容拆成有节奏的章节，让用户一步步理解。\n\n适用场景：产品发布、品牌故事、数据新闻、长篇专题、功能介绍和教育内容。不适合高频工具页、后台列表和需要快速完成任务的页面。\n\n结构要求：先写叙事大纲，再设计章节、固定视觉、滚动进度、关键转场和暂停点；每屏只推进一个观点。\n\n交互要求：滚动触发要可预测，动效可跳过；提供 reduced-motion；移动端减少固定层和复杂视差。\n\n输出格式：给出故事线、章节结构、滚动状态、关键画面、动效节奏、性能策略、无障碍和反例。"
],
"en": [
"Redesign this page around Scroll Narrative.\n\nRole: You are a UI designer skilled in interactive storytelling, launch pages, and frontend motion.\n\nPrinciple: Scroll is not an animation trigger decoration. It breaks complex content into paced chapters so users understand step by step.\n\nUse cases: product launches, brand stories, data journalism, longform features, feature walkthroughs, and education content. Avoid high-frequency tools, admin lists, and task pages.\n\nStructure: Write the story outline first, then design chapters, pinned visuals, progress, key transitions, and pause points. Each screen advances one idea.\n\nInteraction: Scroll triggers must be predictable and skippable. Support reduced-motion. Reduce pinned layers and parallax on mobile.\n\nReturn: storyline, chapter structure, scroll states, key frames, motion rhythm, performance strategy, accessibility, and anti-patterns."
]
},
"tip": {
"zh": "滚动叙事要先有故事线；没有内容节奏时，滚动动画只会显得炫技。",
"en": "Scrollytelling needs a storyline first. Without content rhythm, scroll animation feels like showing off."
},
"preview": {
"kind": "term-lab",
"variant": "scroll-narrative",
"templates": 3,
"title": {
"zh": "滚动叙事",
"en": "Scroll Narrative"
},
"subtitle": {
"zh": "章节进度、固定画面和渐进揭示",
"en": "Chapters, pinned scenes, progressive reveal"
},
"palette": [
"#f7faf9",
"#0f172a",
"#35c5ba",
"#cbd5e1",
"#ffffff"
],
"chips": [
{
"label": {
"zh": "章节",
"en": "Chapters"
},
"tone": "brand"
},
{
"label": {
"zh": "进度",
"en": "Progress"
},
"tone": "muted"
},
{
"label": {
"zh": "减动效",
"en": "Reduced motion"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "mouse-tracking-effect",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "鼠标追踪效果",
"en": "Mouse Tracking Effect"
},
"aliases": {
"zh": [
"鼠标追踪",
"光标跟随",
"cursor tracking",
"鼠标光晕"
],
"en": [
"Mouse tracking",
"cursor follow",
"cursor glow",
"pointer tracking"
]
},
"description": {
"zh": "根据光标位置改变光晕、卡片倾斜、遮罩或局部高亮，让界面对用户动作产生即时回应。",
"en": "An interaction style that responds to pointer position through glow, tilt, masks, or local highlight feedback."
},
"prompt": {
"zh": [
"请为这个界面设计「鼠标追踪效果 / Mouse Tracking」。\n\n角色：你是一名懂前端性能和交互反馈的动效设计师。\n\n设计理念：鼠标追踪要让用户感到界面在回应自己，不是到处追着光点跑。效果必须服务可点击、聚焦或探索。\n\n适用场景：创意作品集、AI 工具、产品首屏、定价卡片、图库、可探索数据和高质感营销页。不适合移动优先、表格密集和严肃办公流程。\n\n视觉要求：可使用局部光晕、卡片轻微倾斜、边框高亮、遮罩揭示或磁吸按钮；亮度低、范围小、速度快，不能遮挡正文。\n\n实现要求：使用 pointer events、CSS variables 或 requestAnimationFrame；限制重绘区域；支持键盘 focus 的等价反馈；移动端关闭或降级。\n\n输出格式：给出触发区域、反馈类型、性能方案、降级策略、无障碍和反例。"
],
"en": [
"Design a Mouse Tracking Effect for this interface.\n\nRole: You are a motion designer who understands frontend performance and interaction feedback.\n\nPrinciple: Mouse tracking should make the interface feel responsive, not chase the cursor everywhere. The effect must support clickability, focus, or exploration.\n\nUse cases: creative portfolios, AI tools, hero sections, pricing cards, galleries, exploratory data, and polished marketing pages. Avoid mobile-first flows, dense tables, and serious office workflows.\n\nVisual rules: Use local glow, subtle card tilt, border highlight, mask reveal, or magnetic buttons. Keep brightness low, area small, and speed fast. Never cover body text.\n\nImplementation: Use pointer events, CSS variables, or requestAnimationFrame; limit repaint area; provide equivalent keyboard focus; disable or degrade on mobile.\n\nReturn: trigger zones, feedback type, performance plan, fallback, accessibility, and anti-patterns."
]
},
"tip": {
"zh": "鼠标追踪不是到处发光；只在可探索或可点击区域增强反馈。",
"en": "Mouse tracking is not glow everywhere. Use it only where exploration or click feedback benefits."
},
"preview": {
"kind": "term-lab",
"variant": "mouse-tracking",
"templates": 2,
"title": {
"zh": "鼠标追踪效果",
"en": "Mouse Tracking Effect"
},
"subtitle": {
"zh": "局部光晕、边框高亮和性能降级",
"en": "Local glow, border highlight, performance fallback"
},
"palette": [
"#f8fafc",
"#0f172a",
"#35c5ba",
"#dbeafe",
"#ffffff"
],
"chips": [
{
"label": {
"zh": "光标热区",
"en": "Hot zone"
},
"tone": "brand"
},
{
"label": {
"zh": "CSS vars",
"en": "CSS vars"
},
"tone": "muted"
},
{
"label": {
"zh": "降级",
"en": "Fallback"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "bento-grid-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "Bento 网格风格",
"en": "Bento Grid Style"
},
"aliases": {
"zh": [
"Bento 风格",
"便当网格",
"模块化卡片",
"bento UI"
],
"en": [
"Bento grid",
"bento UI",
"modular cards"
]
},
"description": {
"zh": "用不同尺寸的模块卡片组织功能、指标和故事，让复杂信息像便当盒一样分区清楚。",
"en": "A modular card style that organizes features, metrics, and stories into varied blocks like a bento box."
},
"prompt": {
"zh": [
"请以「Bento 网格风格」重组这个界面。\n\n角色：你是一名擅长模块化信息架构和产品展示的 UI 设计师。\n\n设计理念：Bento 不是普通卡片瀑布流，而是按信息优先级分配卡片尺寸，让关键功能、指标和示例形成可扫描组合。\n\n适用场景：AI 产品首页、功能总览、定价说明、作品集、仪表盘摘要和复杂能力展示。不适合纯文章阅读和需要连续流程的表单。\n\n布局要求：定义 1-2 个重点大卡、若干中卡和小卡；每张卡只表达一个主题；图标、数据、截图和操作入口要按重要性分配。\n\n视觉要求：浅色 surface、细边框、低饱和强调色、8-16px 圆角、克制阴影；避免每张卡都同样大、同样标题和同样装饰。\n\n输出格式：给出卡片优先级、网格断点、内容类型、状态、响应式重排和反例。"
],
"en": [
"Reorganize this interface with a Bento Grid Style.\n\nRole: You are a UI designer skilled in modular information architecture and product presentation.\n\nPrinciple: Bento is not a generic card masonry. It assigns card sizes by information priority so features, metrics, and examples become scannable.\n\nUse cases: AI product homepages, feature overviews, pricing explanations, portfolios, dashboard summaries, and complex capability showcases. Avoid pure reading pages and continuous form flows.\n\nLayout: Define one or two hero cards, several medium cards, and smaller support cards. Each card expresses one idea. Icons, data, screenshots, and actions follow importance.\n\nVisual rules: Use light surfaces, fine borders, muted accents, 8-16px radius, and restrained shadows. Avoid same-size cards with repeated headings and decorations.\n\nReturn: card priority, grid breakpoints, content types, states, responsive reflow, and anti-patterns."
]
},
"tip": {
"zh": "Bento 的价值是信息优先级，不是把所有内容塞进圆角卡片。",
"en": "Bento is about information priority, not stuffing everything into rounded cards."
},
"preview": {
"kind": "term-lab",
"variant": "bento-style",
"templates": 3,
"title": {
"zh": "Bento 网格风格",
"en": "Bento Grid Style"
},
"subtitle": {
"zh": "不同尺寸卡片表达不同优先级",
"en": "Different card sizes express priority"
},
"palette": [
"#ffffff",
"#f5f7fb",
"#0f172a",
"#35c5ba",
"#e2e8f0"
],
"chips": [
{
"label": {
"zh": "大卡",
"en": "Hero card"
},
"tone": "brand"
},
{
"label": {
"zh": "模块",
"en": "Modules"
},
"tone": "muted"
},
{
"label": {
"zh": "断点",
"en": "Breakpoints"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "wabi-sabi-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "侘寂风格",
"en": "Wabi-Sabi Style"
},
"aliases": {
"zh": [
"侘寂",
"不完美美学",
"wabi sabi UI",
"静谧自然风"
],
"en": [
"Wabi-Sabi",
"imperfect minimalism",
"quiet natural UI"
]
},
"description": {
"zh": "用不完美纹理、自然留白、低饱和泥土色和安静排版呈现克制、时间感与手作温度。",
"en": "A quiet style using imperfect texture, natural whitespace, muted earth tones, and restrained typography."
},
"prompt": {
"zh": [
"请以「侘寂 / Wabi-Sabi」为核心方向重设计这个界面。\n\n角色：你是一名理解日式审美、自然材质和慢体验的 UI 设计师。\n\n设计理念：侘寂强调不完美、留白、时间痕迹和克制温度，不是复古滤镜或粗糙贴图。\n\n适用场景：茶、香、手作、摄影、生活方式、独立作品集、冥想和长文内容。不适合高效率后台、强转化营销和儿童娱乐产品。\n\n视觉要求：使用米白、陶土、灰褐、墨色和少量干草色；布局留白充分，边缘可轻微不规则；纹理像纸、陶、木，不要脏乱。\n\n排版要求：字体层级安静，行距舒展，装饰极少；图片低饱和、自然裁切，避免强对比滤镜。\n\n输出格式：给出材质、色盘、留白节奏、图片处理、组件状态、动效速度和反例。"
],
"en": [
"Redesign this interface around Wabi-Sabi.\n\nRole: You are a UI designer who understands Japanese aesthetics, natural materials, and slow experiences.\n\nPrinciple: Wabi-Sabi values imperfection, whitespace, traces of time, and restrained warmth. It is not a retro filter or dirty texture.\n\nUse cases: tea, incense, craft, photography, lifestyle, independent portfolios, meditation, and longform content. Avoid high-efficiency admin tools, aggressive conversion pages, and children entertainment.\n\nVisual rules: Use ivory, clay, gray-brown, ink, and small dry-grass accents. Keep generous whitespace; edges may be slightly irregular. Texture should feel like paper, ceramic, or wood, not grime.\n\nTypography: Quiet hierarchy, comfortable line-height, minimal decoration. Images are muted and naturally cropped.\n\nReturn: material, palette, whitespace rhythm, image treatment, component states, motion speed, and anti-patterns."
]
},
"tip": {
"zh": "侘寂要安静、有呼吸感；别把它做成“脏旧风”。",
"en": "Wabi-Sabi should feel quiet and breathable, not simply old and dirty."
},
"preview": {
"kind": "term-lab",
"variant": "wabi-sabi",
"templates": 2,
"title": {
"zh": "侘寂风格",
"en": "Wabi-Sabi Style"
},
"subtitle": {
"zh": "纸陶纹理、自然留白和低饱和泥土色",
"en": "Paper and clay texture, natural whitespace, muted earth tones"
},
"palette": [
"#f4efe4",
"#b59a7b",
"#7b7065",
"#2f2b27",
"#d8c7a1"
],
"chips": [
{
"label": {
"zh": "留白",
"en": "Whitespace"
},
"tone": "muted"
},
{
"label": {
"zh": "陶土",
"en": "Clay"
},
"tone": "brand"
},
{
"label": {
"zh": "不完美",
"en": "Imperfect"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "solarpunk-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "太阳朋克风格",
"en": "Solarpunk Style"
},
"aliases": {
"zh": [
"太阳朋克",
"生态未来主义",
"solarpunk UI",
"可持续未来风"
],
"en": [
"Solarpunk",
"eco futurism",
"sustainable future UI"
]
},
"description": {
"zh": "把可持续未来、太阳能、植物建筑和乐观科技结合起来的生态未来主义视觉风格。",
"en": "An optimistic eco-futurist style combining sustainability, solar energy, plant architecture, and humane technology."
},
"prompt": {
"zh": [
"请以「太阳朋克 / Solarpunk」为核心方向重设计这个界面。\n\n角色：你是一名擅长生态未来主义、可持续品牌和乐观科技视觉的 UI 设计师。\n\n设计理念：太阳朋克表达“技术与自然共生”的积极未来，不是赛博朋克换成绿色，也不是环保宣传海报。\n\n适用场景：新能源、气候科技、城市更新、社区产品、可持续消费、教育和未来主义品牌。不适合严肃金融后台和暗黑游戏界面。\n\n视觉要求：使用阳光黄、叶绿、天空蓝、暖白和少量铜色；加入太阳能板、植物建筑、圆拱、社区网格和自然光；整体明亮但低饱和。\n\n交互要求：动效轻快、有成长感；hover 可像阳光升起或植物展开；状态必须清晰，不要让插画压过任务。\n\n输出格式：给出世界观、色彩、图形语言、布局、组件状态、动效、响应式和反例。"
],
"en": [
"Redesign this interface around Solarpunk.\n\nRole: You are a UI designer skilled in eco-futurism, sustainable brands, and optimistic technology visuals.\n\nPrinciple: Solarpunk expresses a positive future where technology and nature coexist. It is not cyberpunk turned green, nor a generic eco poster.\n\nUse cases: renewable energy, climate tech, urban renewal, community products, sustainable commerce, education, and futurist brands. Avoid serious finance dashboards and dark game UI.\n\nVisual rules: Use sun yellow, leaf green, sky blue, warm white, and small copper accents. Include solar panels, plant architecture, arches, community grids, and daylight. Keep it bright but muted.\n\nInteraction: Motion is light and growth-like. Hover may feel like sunlight rising or leaves unfolding. States stay clear and illustrations do not overpower tasks.\n\nReturn: world, palette, graphic language, layout, component states, motion, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "太阳朋克是乐观的生态未来，不是绿色霓虹或环保图标堆叠。",
"en": "Solarpunk is optimistic eco-future, not green neon or piles of eco icons."
},
"preview": {
"kind": "term-lab",
"variant": "solarpunk",
"templates": 2,
"title": {
"zh": "太阳朋克风格",
"en": "Solarpunk Style"
},
"subtitle": {
"zh": "阳光、植物建筑和可持续未来感",
"en": "Sunlight, plant architecture, sustainable future"
},
"palette": [
"#fff6d6",
"#7fbf78",
"#69b7d6",
"#d2a85f",
"#f8fbef"
],
"chips": [
{
"label": {
"zh": "太阳能",
"en": "Solar"
},
"tone": "brand"
},
{
"label": {
"zh": "生态",
"en": "Eco"
},
"tone": "success"
},
{
"label": {
"zh": "未来感",
"en": "Future"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "frutiger-aero-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "Frutiger Aero",
"en": "Frutiger Aero"
},
"aliases": {
"zh": [
"Frutiger Aero",
"水晶自然风",
"2000s 科技自然风",
"aero UI"
],
"en": [
"Frutiger Aero",
"aero UI",
"2000s nature tech"
]
},
"description": {
"zh": "2000 年代科技自然审美，融合蓝天、水滴、透明晶体、光泽图标和乐观数字生活感。",
"en": "A 2000s tech-nature aesthetic mixing sky, water, translucent crystals, glossy icons, and optimistic digital life."
},
"prompt": {
"zh": [
"请以「Frutiger Aero」为核心方向重设计这个界面。\n\n角色：你是一名懂 2000 年代数字审美、系统图标和现代克制改造的 UI 设计师。\n\n设计理念：Frutiger Aero 是蓝天、水、透明晶体、光泽和自然科技的乐观组合；现代使用时要提炼符号，不能做成廉价旧系统皮肤。\n\n适用场景：怀旧专题、个人作品集、音乐/游戏、实验性品牌、复古科技内容。不适合严肃企业 SaaS 和专业金融工具。\n\n视觉要求：使用天光蓝、水绿色、白色高光和少量草绿；可用气泡、水滴、晶体图标、圆润面板和自然背景，但降低饱和度，保留现代间距。\n\n交互要求：hover 可有轻微高光滑过；透明层要保证文字对比；移动端减少复杂背景。\n\n输出格式：给出怀旧程度、色彩、晶体/水滴元素、图标、面板、状态、响应式和反例。"
],
"en": [
"Redesign this interface around Frutiger Aero.\n\nRole: You are a UI designer who understands 2000s digital aesthetics, system icons, and modern restraint.\n\nPrinciple: Frutiger Aero combines sky, water, translucent crystals, gloss, and optimistic nature-tech. Modern use should extract symbols, not recreate a cheap old system skin.\n\nUse cases: nostalgia features, personal portfolios, music/games, experimental brands, and retro-tech content. Avoid serious enterprise SaaS and professional finance tools.\n\nVisual rules: Use sky blue, aqua green, white highlights, and small grass green accents. Bubbles, droplets, crystal icons, rounded panels, and nature backgrounds are allowed with lower saturation and modern spacing.\n\nInteraction: Hover may sweep a subtle highlight. Transparent layers must keep text contrast. Reduce complex backgrounds on mobile.\n\nReturn: nostalgia level, palette, crystal/water elements, icons, panels, states, responsive behavior, and anti-patterns."
]
},
"tip": {
"zh": "Frutiger Aero 可以怀旧，但要现代化降噪，否则很容易变成旧系统皮肤。",
"en": "Frutiger Aero can be nostalgic, but needs modern restraint or it becomes an old skin."
},
"preview": {
"kind": "term-lab",
"variant": "frutiger-aero",
"templates": 2,
"title": {
"zh": "Frutiger Aero",
"en": "Frutiger Aero"
},
"subtitle": {
"zh": "蓝天、水滴、晶体高光和乐观科技感",
"en": "Sky, droplets, crystal highlights, optimistic tech"
},
"palette": [
"#e8f7ff",
"#72c9e8",
"#a7e3c2",
"#ffffff",
"#4f9fd6"
],
"chips": [
{
"label": {
"zh": "水晶",
"en": "Crystal"
},
"tone": "brand"
},
{
"label": {
"zh": "水滴",
"en": "Droplet"
},
"tone": "muted"
},
{
"label": {
"zh": "低噪声",
"en": "Quiet"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "scandi-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "北欧风格",
"en": "Scandinavian Style"
},
"aliases": {
"zh": [
"北欧风",
"Scandi UI",
"斯堪的纳维亚风",
"温暖极简"
],
"en": [
"Scandinavian Style",
"Scandi UI",
"warm minimalism"
]
},
"description": {
"zh": "用温暖浅木色、柔和中性色、实用布局和自然光感建立舒适、可信、少负担的界面。",
"en": "A warm minimal style using light wood tones, soft neutrals, practical layout, and natural light to create comfortable UI."
},
"prompt": {
"zh": [
"请以「北欧风格 / Scandinavian Style」为核心方向重设计这个界面。\n\n角色：你是一名擅长温暖极简、生活方式产品和实用信息布局的 UI 设计师。\n\n设计理念：北欧风强调实用、舒适、自然光和材料诚实，不是米色模板或空洞留白。\n\n适用场景：家居、生活方式、电商、健康、个人知识库、轻量工具和内容型产品。不适合强视觉娱乐页和高密度运维后台。\n\n视觉要求：使用暖白、浅木、亚麻灰、雾蓝和少量植物绿；圆角适中，阴影柔和，组件边界清楚；图片自然、明亮、低饱和。\n\n排版要求：标题直接，正文舒适，按钮文案清楚；信息密度适中，不为了“干净”删掉必要说明。\n\n输出格式：给出色彩、材料、布局、组件状态、图片处理、移动端策略和反例。"
],
"en": [
"Redesign this interface around Scandinavian Style.\n\nRole: You are a UI designer skilled in warm minimalism, lifestyle products, and practical information layout.\n\nPrinciple: Scandi design values usefulness, comfort, daylight, and honest materials. It is not a beige template or empty whitespace.\n\nUse cases: home, lifestyle, commerce, wellness, personal knowledge tools, lightweight tools, and content products. Avoid loud entertainment pages and dense ops dashboards.\n\nVisual rules: Use warm white, light wood, linen gray, mist blue, and small plant green accents. Radius is moderate, shadows are soft, and component boundaries remain clear. Images are natural, bright, and muted.\n\nTypography: Direct headings, comfortable body text, clear button copy. Keep useful explanations instead of deleting content for cleanliness.\n\nReturn: palette, material, layout, component states, image treatment, mobile strategy, and anti-patterns."
]
},
"tip": {
"zh": "北欧风不是全米色；它靠实用布局、自然材料和舒适阅读建立信任。",
"en": "Scandi style is not all beige. It builds trust through useful layout, natural materials, and comfortable reading."
},
"preview": {
"kind": "term-lab",
"variant": "scandi",
"templates": 2,
"title": {
"zh": "北欧风格",
"en": "Scandinavian Style"
},
"subtitle": {
"zh": "暖白、浅木色和实用舒适的极简",
"en": "Warm white, light wood, practical comfort"
},
"palette": [
"#fbf7ef",
"#d7b98f",
"#d8e4e8",
"#6f7f73",
"#ffffff"
],
"chips": [
{
"label": {
"zh": "浅木",
"en": "Light wood"
},
"tone": "muted"
},
{
"label": {
"zh": "舒适",
"en": "Comfort"
},
"tone": "success"
},
{
"label": {
"zh": "实用",
"en": "Useful"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "blueprint-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "蓝图风格",
"en": "Blueprint Style"
},
"aliases": {
"zh": [
"工程蓝图",
"技术图纸",
"Blueprint UI"
],
"en": [
"Blueprint Style",
"technical drawing",
"engineering UI"
]
},
"description": {
"zh": "用浅蓝网格、工程线、尺寸标注和模块编号表达系统规划感，适合技术、建筑和流程类界面。",
"en": "A planning-oriented visual style using pale blue grids, drafting lines, measurements, and module labels."
},
"prompt": {
"zh": [
"请以「蓝图风格 / Blueprint Style」重设计这个界面。\n\n角色：你是一名擅长技术产品、建筑图纸和系统信息架构的 UI 设计师。\n\n场景：适合开发者工具、配置面板、系统规划、建筑空间、流程编排和产品路线图。\n\n视觉规则：使用低饱和浅蓝、白色、深海军蓝和少量青色；背景可以有细网格、坐标线、尺寸标注和模块编号；组件边框细而清楚，像可执行的工程图。\n\n排版与交互：标题要精准，标签像图纸批注；Hover 可让线框或节点微亮，Active 用描边加粗表现选中。\n\n反例：不要做成高饱和科技霓虹，不要让网格压过正文，不要只放抽象线条。\n\n输出：色板、网格规则、组件结构、交互状态和可落地 CSS 建议。"
],
"en": [
"Redesign this interface in Blueprint Style.\n\nRole: You are a UI designer skilled in technical products, architectural drawings, and system information architecture.\n\nUse cases: developer tools, configuration panels, system planning, architecture, workflow orchestration, and roadmaps.\n\nVisual rules: Use muted pale blue, white, deep navy, and small cyan accents. Backgrounds may include fine grids, coordinate lines, measurements, and module IDs. Borders are thin and precise, like executable drawings.\n\nTypography and interaction: Headings are exact; labels feel like drafting annotations. Hover can brighten outlines or nodes; active states thicken the selected stroke.\n\nAvoid: saturated neon tech, grids that overpower content, and decorative abstract lines without system meaning.\n\nReturn: palette, grid rules, component structure, interaction states, and CSS guidance."
]
},
"tip": {
"zh": "蓝图风的重点是“可规划、可标注”，不是把页面简单染成蓝色。",
"en": "Blueprint style is about planning and annotation, not simply making everything blue."
},
"preview": {
"kind": "term-lab",
"variant": "blueprint",
"templates": 2,
"title": {
"zh": "蓝图风格",
"en": "Blueprint Style"
},
"subtitle": {
"zh": "工程网格、尺寸线和模块标注",
"en": "Engineering grids, dimensions, module marks"
},
"palette": [
"#eaf6ff",
"#b7dcf4",
"#1f4f7a",
"#ffffff",
"#36a7c9"
],
"chips": [
{
"label": {
"zh": "网格",
"en": "Grid"
},
"tone": "brand"
},
{
"label": {
"zh": "标注",
"en": "Measure"
},
"tone": "muted"
},
{
"label": {
"zh": "规划",
"en": "Plan"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "paper-cutout-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "纸雕剪纸风格",
"en": "Paper Cutout Style"
},
"aliases": {
"zh": [
"纸艺 UI",
"剪纸层叠",
"Paper Cutout"
],
"en": [
"Paper Cutout",
"paper craft UI",
"layered paper"
]
},
"description": {
"zh": "通过分层纸片、柔和投影、裁切边缘和浅色纸感，做出手工、亲和、轻量的界面氛围。",
"en": "A tactile style built with layered paper sheets, soft shadows, cut edges, and light paper textures."
},
"prompt": {
"zh": [
"请以「纸雕剪纸风格 / Paper Cutout Style」重设计这个界面。\n\n角色：你是一名擅长纸艺、教育产品和活动视觉的 UI 设计师。\n\n场景：适合儿童教育、手作课程、节日活动、品牌专题、轻量故事页面和引导页。\n\n视觉规则：用暖白纸、浅桃、雾蓝、鼠尾草绿和少量墨色文字；元素像一层层裁切纸片，有柔和投影和轻微错位；圆角可以自然但不要过度胶囊化。\n\n交互：Hover 像纸片轻轻抬起，Active 像按下纸层；状态变化保持轻快，150-220ms。\n\n反例：不要做成儿童贴纸堆叠，不要使用厚重 3D 塑料感，不要让投影太脏。\n\n输出：层级结构、纸张色板、阴影参数、按钮状态和移动端布局。"
],
"en": [
"Redesign this interface in Paper Cutout Style.\n\nRole: You are a UI designer skilled in paper craft, education products, and campaign visuals.\n\nUse cases: kids education, craft courses, seasonal campaigns, brand stories, lightweight editorial pages, and onboarding.\n\nVisual rules: Use warm white paper, pale peach, mist blue, sage green, and restrained ink text. Elements feel like stacked cut paper with soft shadows and slight offsets. Radius may feel handmade but not overly pill-shaped.\n\nInteraction: Hover lifts a paper layer; active states press the layer down. Keep motion light, around 150-220ms.\n\nAvoid: childish sticker clutter, heavy plastic 3D, and dirty oversized shadows.\n\nReturn: layer structure, paper palette, shadow settings, button states, and mobile layout."
]
},
"tip": {
"zh": "纸雕风要靠层次和投影，而不是大量可爱装饰。",
"en": "Paper cutout style depends on layers and shadows, not piles of cute decoration."
},
"preview": {
"kind": "term-lab",
"variant": "paper-cutout",
"templates": 2,
"title": {
"zh": "纸雕剪纸",
"en": "Paper Cutout"
},
"subtitle": {
"zh": "浅色纸片、裁切边缘和柔和投影",
"en": "Light paper layers, cut edges, soft shadows"
},
"palette": [
"#fff7ed",
"#ffd9c7",
"#d8e8ef",
"#cfe3d4",
"#334155"
],
"chips": [
{
"label": {
"zh": "层叠",
"en": "Layers"
},
"tone": "brand"
},
{
"label": {
"zh": "纸感",
"en": "Paper"
},
"tone": "muted"
},
{
"label": {
"zh": "手作",
"en": "Craft"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "hand-drawn-sketch-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "手绘草图风格",
"en": "Hand-drawn Sketch Style"
},
"aliases": {
"zh": [
"手绘 UI",
"草图线稿",
"低保真草图"
],
"en": [
"hand-drawn UI",
"sketch style",
"wire sketch"
]
},
"description": {
"zh": "用手绘线条、低保真结构、批注和轻微不规则边缘，让页面像正在讨论中的产品草图。",
"en": "A conversational style using hand-drawn lines, low-fidelity structure, annotations, and slightly irregular edges."
},
"prompt": {
"zh": [
"请以「手绘草图风格 / Hand-drawn Sketch Style」重设计这个界面。\n\n角色：你是一名擅长产品共创、工作坊和概念验证的 UI 设计师。\n\n场景：适合早期原型、课程讲解、创意工具、设计评审、方案比选和产品故事页。\n\n视觉规则：用米白纸底、铅笔灰、蓝色批注和少量荧光标记；边框允许轻微抖动，组件像 wireframe，但信息层级必须清楚。\n\n交互：Hover 可出现批注或圈选线，Active 用手绘下划线或框选反馈。\n\n反例：不要让页面看起来潦草不可用，不要把所有字体都变成手写体，不要牺牲可读性。\n\n输出：草图层级、批注规则、组件状态、字体建议和适用边界。"
],
"en": [
"Redesign this interface in Hand-drawn Sketch Style.\n\nRole: You are a UI designer skilled in product co-creation, workshops, and concept validation.\n\nUse cases: early prototypes, learning material, creative tools, design reviews, concept comparison, and product storytelling.\n\nVisual rules: Use warm paper, pencil gray, blue annotations, and small highlighter marks. Borders may wobble slightly and components can feel like wireframes, but hierarchy must stay clear.\n\nInteraction: Hover can reveal notes or circle marks; active states use hand-drawn underline or selection boxes.\n\nAvoid: messy unusable UI, using handwriting everywhere, and sacrificing readability.\n\nReturn: sketch hierarchy, annotation rules, component states, type guidance, and boundaries."
]
},
"tip": {
"zh": "手绘草图适合表达“正在推敲”，但不能让用户觉得产品没完成。",
"en": "Sketch style suggests exploration, but it should not make the product feel unfinished."
},
"preview": {
"kind": "term-lab",
"variant": "hand-drawn-sketch",
"templates": 2,
"title": {
"zh": "手绘草图",
"en": "Hand-drawn Sketch"
},
"subtitle": {
"zh": "线稿、批注和低保真结构",
"en": "Linework, notes, low-fi structure"
},
"palette": [
"#fffaf0",
"#475569",
"#4f86c6",
"#f4d35e",
"#ffffff"
],
"chips": [
{
"label": {
"zh": "线稿",
"en": "Sketch"
},
"tone": "muted"
},
{
"label": {
"zh": "批注",
"en": "Notes"
},
"tone": "brand"
},
{
"label": {
"zh": "原型",
"en": "Proto"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "holographic-foil-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "全息镭射风格",
"en": "Holographic Foil Style"
},
"aliases": {
"zh": [
"镭射卡片",
"全息薄膜",
"Holographic UI"
],
"en": [
"Holographic Foil",
"iridescent UI",
"foil style"
]
},
"description": {
"zh": "用低饱和彩虹薄膜、角度高光、透明层和细腻金属边缘，表达未来、收藏和高级包装感。",
"en": "A premium futuristic style using muted iridescent foil, angle highlights, translucent layers, and delicate metallic edges."
},
"prompt": {
"zh": [
"请以「全息镭射风格 / Holographic Foil Style」重设计这个界面。\n\n角色：你是一名擅长数字藏品、音乐活动、潮流品牌和高级包装视觉的 UI 设计师。\n\n场景：适合会员卡、虚拟票券、潮流活动、创作者作品集、数字资产和轻量品牌页。\n\n视觉规则：使用珍珠白、淡紫、薄荷青、浅玫瑰和银灰；高光像薄膜随角度变化，色彩面积要克制；正文必须放在清晰底层上。\n\n交互：Hover 可以移动一条细高光，Active 让薄膜角度轻微变化；动效低频，避免廉价闪烁。\n\n反例：不要满屏彩虹渐变，不要强发光，不要让文字压在复杂镭射背景上。\n\n输出：色彩面积比例、卡片层级、高光动效、可读性规则和反例。"
],
"en": [
"Redesign this interface in Holographic Foil Style.\n\nRole: You are a UI designer skilled in digital collectibles, music campaigns, fashion brands, and premium packaging visuals.\n\nUse cases: membership cards, virtual tickets, trend campaigns, creator portfolios, digital assets, and lightweight brand pages.\n\nVisual rules: Use pearl white, pale violet, mint cyan, soft rose, and silver gray. Highlights should feel like foil shifting with angle, with restrained color area. Body text must sit on readable surfaces.\n\nInteraction: Hover can move a fine highlight; active states slightly tilt the foil angle. Keep motion rare and avoid cheap flicker.\n\nAvoid: full-screen rainbow gradients, strong glow, and text on noisy foil backgrounds.\n\nReturn: color area ratio, card layers, highlight motion, readability rules, and anti-patterns."
]
},
"tip": {
"zh": "全息风高级的关键是“薄、淡、少”，不是彩虹铺满。",
"en": "Premium holographic design is thin, muted, and restrained, not rainbow everywhere."
},
"preview": {
"kind": "term-lab",
"variant": "holographic-foil",
"templates": 2,
"title": {
"zh": "全息镭射",
"en": "Holographic Foil"
},
"subtitle": {
"zh": "低饱和彩虹薄膜与角度高光",
"en": "Muted iridescent foil and angle highlights"
},
"palette": [
"#f8fbff",
"#d8ccff",
"#b8f2e6",
"#ffd6e6",
"#94a3b8"
],
"chips": [
{
"label": {
"zh": "薄膜",
"en": "Foil"
},
"tone": "brand"
},
{
"label": {
"zh": "低饱和",
"en": "Muted"
},
"tone": "muted"
},
{
"label": {
"zh": "收藏",
"en": "Collect"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "duotone-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "双色调风格",
"en": "Duotone Style"
},
"aliases": {
"zh": [
"双色 UI",
"Duotone",
"双色图像"
],
"en": [
"Duotone",
"two-tone UI",
"duotone image"
]
},
"description": {
"zh": "用两个主色建立强识别度，通过明暗层级和留白控制信息，不依赖复杂装饰。",
"en": "A distinctive style built around two primary colors, value hierarchy, and restrained whitespace."
},
"prompt": {
"zh": [
"请以「双色调风格 / Duotone Style」重设计这个界面。\n\n角色：你是一名擅长品牌识别、活动页和高转化落地页的 UI 设计师。\n\n场景：适合品牌 Campaign、音乐/播客、创作者主页、SaaS 专题、招聘页和内容封面。\n\n视觉规则：只选择两种主色和一组中性色；图片、插画、图标都按双色处理；用明度差区分标题、正文、按钮和辅助信息。\n\n交互：Hover 可让第二主色显性增强，Active 用色块反转，不增加额外装饰。\n\n反例：不要偷偷加入第三第四个强调色，不要靠渐变掩盖层级问题，不要牺牲正文对比度。\n\n输出：双色方案、明度层级、图片处理、组件状态和反例。"
],
"en": [
"Redesign this interface in Duotone Style.\n\nRole: You are a UI designer skilled in brand identity, campaign pages, and conversion-focused landing pages.\n\nUse cases: brand campaigns, music or podcasts, creator profiles, SaaS campaigns, hiring pages, and content covers.\n\nVisual rules: Choose only two primary colors plus neutrals. Images, illustrations, and icons should follow the duotone treatment. Use value contrast for headings, body text, buttons, and supporting info.\n\nInteraction: Hover may strengthen the second color; active states can invert color blocks without adding decoration.\n\nAvoid: sneaking in extra accent colors, hiding hierarchy issues with gradients, and weakening body text contrast.\n\nReturn: duotone palette, value hierarchy, image treatment, component states, and anti-patterns."
]
},
"tip": {
"zh": "双色调不是少用颜色，而是用两种颜色把层级做完整。",
"en": "Duotone is not merely fewer colors; two colors must carry the full hierarchy."
},
"preview": {
"kind": "term-lab",
"variant": "duotone",
"templates": 2,
"title": {
"zh": "双色调",
"en": "Duotone"
},
"subtitle": {
"zh": "两种主色承担完整识别和层级",
"en": "Two primary colors carry identity and hierarchy"
},
"palette": [
"#1d3557",
"#e9c46a",
"#f8fafc",
"#ffffff",
"#334155"
],
"chips": [
{
"label": {
"zh": "两色",
"en": "Two hues"
},
"tone": "brand"
},
{
"label": {
"zh": "识别",
"en": "Identity"
},
"tone": "success"
},
{
"label": {
"zh": "克制",
"en": "Restrained"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "grain-texture-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "颗粒质感风格",
"en": "Grain Texture Style"
},
"aliases": {
"zh": [
"噪点质感",
"胶片颗粒",
"Grain UI"
],
"en": [
"Grain Texture",
"noise texture",
"film grain UI"
]
},
"description": {
"zh": "用细噪点、纸面纹理和低对比渐变给界面增加触感，避免纯平面过于塑料。",
"en": "A tactile style using fine noise, paper texture, and low-contrast gradients to soften flat digital surfaces."
},
"prompt": {
"zh": [
"请以「颗粒质感风格 / Grain Texture Style」重设计这个界面。\n\n角色：你是一名擅长编辑视觉、品牌封面和质感网页的 UI 设计师。\n\n场景：适合作品集、博客、品牌叙事、音乐页面、摄影项目和精品活动页。\n\n视觉规则：使用低饱和背景、细颗粒噪点、柔和渐变和纸面纹理；颗粒只增加质感，不抢内容；边框和阴影要克制。\n\n交互：Hover 可轻微提升亮度或让纹理层移动 1-2px；动效要像光线变化，不像特效。\n\n反例：不要把噪点做成脏污，不要影响文字边缘清晰度，不要高饱和渐变加颗粒。\n\n输出：纹理强度、背景层、文本可读性、组件状态和实现建议。"
],
"en": [
"Redesign this interface in Grain Texture Style.\n\nRole: You are a UI designer skilled in editorial visuals, brand covers, and tactile web design.\n\nUse cases: portfolios, blogs, brand storytelling, music pages, photography projects, and premium campaigns.\n\nVisual rules: Use muted backgrounds, fine grain, soft gradients, and paper-like texture. Grain should add tactility without competing with content. Borders and shadows stay restrained.\n\nInteraction: Hover may slightly raise brightness or move the texture layer 1-2px. Motion should feel like light changing, not a special effect.\n\nAvoid: dirty noise, blurred text edges, and saturated gradients with heavy grain.\n\nReturn: texture strength, background layers, text readability, component states, and implementation guidance."
]
},
"tip": {
"zh": "颗粒是质感调味，不是把页面做脏。",
"en": "Grain is seasoning for tactility, not visual dirt."
},
"preview": {
"kind": "term-lab",
"variant": "grain-texture",
"templates": 2,
"title": {
"zh": "颗粒质感",
"en": "Grain Texture"
},
"subtitle": {
"zh": "细噪点、纸面纹理和低对比渐变",
"en": "Fine noise, paper texture, low-contrast gradients"
},
"palette": [
"#f7f2e8",
"#d7cab8",
"#9ca3af",
"#334155",
"#ffffff"
],
"chips": [
{
"label": {
"zh": "微噪点",
"en": "Grain"
},
"tone": "muted"
},
{
"label": {
"zh": "纸感",
"en": "Paper"
},
"tone": "success"
},
{
"label": {
"zh": "柔和",
"en": "Soft"
},
"tone": "brand"
}
]
},
"pattern": null
},
{
"id": "bauhaus-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "包豪斯风格",
"en": "Bauhaus Style"
},
"aliases": {
"zh": [
"Bauhaus",
"几何现代主义",
"包豪斯 UI"
],
"en": [
"Bauhaus",
"geometric modernism",
"Bauhaus UI"
]
},
"description": {
"zh": "用基础几何、红黄蓝黑、清晰网格和功能主义排版建立强秩序与现代感。",
"en": "A functional modern style based on primary geometry, red-yellow-blue-black palette, grids, and disciplined typography."
},
"prompt": {
"zh": [
"请以「包豪斯风格 / Bauhaus Style」重设计这个界面。\n\n角色：你是一名熟悉现代主义、几何构成和功能主义设计的 UI 设计师。\n\n场景：适合设计教育、创意工具、作品集、展览页面、品牌专题和视觉实验页。\n\n视觉规则：使用白底、黑色文字、红黄蓝三原色点缀；用圆、三角、矩形组织版面；网格清楚，装饰必须承担引导、分组或强调功能。\n\n交互：Hover 可以让几何块位移或变成选中标记；Active 用黑色描边和主色块反馈。\n\n反例：不要做成幼儿园几何拼贴，不要过度旋转，不要让装饰破坏内容路径。\n\n输出：几何系统、网格、色彩比例、组件状态和反例。"
],
"en": [
"Redesign this interface in Bauhaus Style.\n\nRole: You are a UI designer familiar with modernism, geometric composition, and functionalist design.\n\nUse cases: design education, creative tools, portfolios, exhibition pages, brand campaigns, and visual experiments.\n\nVisual rules: Use white background, black text, and red-yellow-blue primary accents. Organize layout with circles, triangles, and rectangles. Grids are explicit, and decoration must guide, group, or emphasize.\n\nInteraction: Hover can shift geometric blocks or turn them into selection marks; active states use black outlines and primary color fills.\n\nAvoid: childish geometry collage, excessive rotation, and decoration that breaks content flow.\n\nReturn: geometric system, grid, color ratio, component states, and anti-patterns."
]
},
"tip": {
"zh": "包豪斯的几何要服务功能，不是随便堆圆形三角形。",
"en": "Bauhaus geometry should serve function, not become random circles and triangles."
},
"preview": {
"kind": "term-lab",
"variant": "bauhaus",
"templates": 2,
"title": {
"zh": "包豪斯",
"en": "Bauhaus"
},
"subtitle": {
"zh": "三原色、基础几何和功能主义网格",
"en": "Primary colors, basic geometry, functional grid"
},
"palette": [
"#ffffff",
"#111827",
"#d92d20",
"#f5c542",
"#2563eb"
],
"chips": [
{
"label": {
"zh": "几何",
"en": "Geometry"
},
"tone": "brand"
},
{
"label": {
"zh": "功能",
"en": "Function"
},
"tone": "success"
},
{
"label": {
"zh": "网格",
"en": "Grid"
},
"tone": "muted"
}
]
},
"pattern": null
},
{
"id": "art-deco-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "装饰艺术风格",
"en": "Art Deco Style"
},
"aliases": {
"zh": [
"Art Deco",
"装饰主义",
"复古奢华"
],
"en": [
"Art Deco",
"decorative modernism",
"vintage luxury"
]
},
"description": {
"zh": "用对称构图、阶梯线、扇形纹样、金属细线和深浅对比营造优雅、仪式感和精品感。",
"en": "A ceremonial premium style using symmetry, stepped lines, fan motifs, metallic hairlines, and high contrast."
},
"prompt": {
"zh": [
"请以「装饰艺术风格 / Art Deco Style」重设计这个界面。\n\n角色：你是一名擅长精品品牌、文化活动和复古高级视觉的 UI 设计师。\n\n场景：适合酒店、展览、珠宝、酒类、文化票券、会员权益和高端品牌专题。\n\n视觉规则：使用象牙白、墨黑、香槟金和深祖母绿；构图偏对称，加入细金线、阶梯边框、扇形纹样和竖向节奏；正文区要干净可读。\n\n交互：Hover 让金线轻微亮起或边框展开；Active 使用细线闭合反馈，不使用大面积闪光。\n\n反例：不要满屏金色，不要廉价赌场感，不要牺牲信息密度和可读性。\n\n输出：装饰规则、边框系统、色彩比例、组件状态和反例。"
],
"en": [
"Redesign this interface in Art Deco Style.\n\nRole: You are a UI designer skilled in premium brands, cultural events, and vintage luxury visuals.\n\nUse cases: hotels, exhibitions, jewelry, beverage brands, cultural tickets, memberships, and luxury campaigns.\n\nVisual rules: Use ivory, ink black, champagne gold, and deep emerald. Composition leans symmetrical, with gold hairlines, stepped borders, fan motifs, and vertical rhythm. Content areas remain clean and readable.\n\nInteraction: Hover can brighten gold lines or expand borders; active states use fine-line closure, not large flashes.\n\nAvoid: gold everywhere, casino kitsch, and sacrificing information density or readability.\n\nReturn: decorative rules, border system, color ratio, component states, and anti-patterns."
]
},
"tip": {
"zh": "装饰艺术要有秩序和仪式感，金色只是一小部分。",
"en": "Art Deco needs order and ceremony; gold is only a small part."
},
"preview": {
"kind": "term-lab",
"variant": "art-deco",
"templates": 2,
"title": {
"zh": "装饰艺术",
"en": "Art Deco"
},
"subtitle": {
"zh": "对称、阶梯线、扇形纹样和金属细线",
"en": "Symmetry, stepped lines, fan motifs, metallic hairlines"
},
"palette": [
"#fbf5e8",
"#111827",
"#c9a45c",
"#173f35",
"#ffffff"
],
"chips": [
{
"label": {
"zh": "对称",
"en": "Symmetry"
},
"tone": "muted"
},
{
"label": {
"zh": "金线",
"en": "Gold line"
},
"tone": "brand"
},
{
"label": {
"zh": "仪式",
"en": "Ceremony"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "dark-academia-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "暗黑学院风格",
"en": "Dark Academia Style"
},
"aliases": {
"zh": [
"学院复古",
"古典学术风",
"Dark Academia"
],
"en": [
"Dark Academia",
"academic vintage",
"scholarly style"
]
},
"description": {
"zh": "用深棕、旧纸、细线、藏书标签和古典排版表达知识、沉浸阅读和学院气质。",
"en": "A scholarly style using dark browns, aged paper, fine rules, library labels, and classical typography."
},
"prompt": {
"zh": [
"请以「暗黑学院风格 / Dark Academia Style」重设计这个界面。\n\n角色：你是一名擅长阅读产品、知识库、课程和文化内容的 UI 设计师。\n\n场景：适合读书笔记、课程页面、知识管理、博物馆内容、学术作品集和长文阅读。\n\n视觉规则：使用咖啡棕、墨黑、旧纸米、暗橄榄和少量铜色；可加入书脊、标签、目录卡和细分隔线；排版要像精心编辑的阅读空间。\n\n交互：Hover 像抽出一张索引卡，Active 用铜色细线或书签条反馈。\n\n反例：不要做成纯暗黑模式，不要过度哥特，不要让低对比影响阅读。\n\n输出：阅读层级、色板、标签组件、状态反馈和反例。"
],
"en": [
"Redesign this interface in Dark Academia Style.\n\nRole: You are a UI designer skilled in reading products, knowledge bases, courses, and cultural content.\n\nUse cases: reading notes, course pages, knowledge management, museum content, academic portfolios, and long-form reading.\n\nVisual rules: Use coffee brown, ink black, aged paper, dark olive, and small copper accents. Include book spines, labels, index cards, and fine rules. Typography should feel like a carefully edited reading room.\n\nInteraction: Hover feels like pulling out an index card; active states use copper hairlines or bookmark strips.\n\nAvoid: generic dark mode, excessive gothic drama, and low contrast that hurts reading.\n\nReturn: reading hierarchy, palette, label components, state feedback, and anti-patterns."
]
},
"tip": {
"zh": "暗黑学院风适合知识和阅读，核心不是黑，而是旧纸、藏书和编辑感。",
"en": "Dark Academia is for knowledge and reading; the core is paper, books, and editing, not black."
},
"preview": {
"kind": "term-lab",
"variant": "dark-academia",
"templates": 2,
"title": {
"zh": "暗黑学院",
"en": "Dark Academia"
},
"subtitle": {
"zh": "旧纸、藏书标签和古典阅读层级",
"en": "Aged paper, library labels, classical reading hierarchy"
},
"palette": [
"#201815",
"#4a3428",
"#efe2c8",
"#6f6a43",
"#b98b56"
],
"chips": [
{
"label": {
"zh": "阅读",
"en": "Reading"
},
"tone": "muted"
},
{
"label": {
"zh": "藏书",
"en": "Library"
},
"tone": "brand"
},
{
"label": {
"zh": "学术",
"en": "Study"
},
"tone": "success"
}
]
},
"pattern": null
},
{
"id": "synthwave-style",
"category": "visual",
"category_label": {
"zh": "色彩与装饰",
"en": "Color & Decoration"
},
"title": {
"zh": "合成波风格",
"en": "Synthwave Style"
},
"aliases": {
"zh": [
"复古未来",
"80s 霓虹",
"Synthwave"
],
"en": [
"Synthwave",
"retro futurism",
"80s neon"
]
},
"description": {
"zh": "用低饱和霓虹、地平线网格、落日圆盘和复古未来字体表达音乐、游戏和夜间驾驶感。",
"en": "A retro-futuristic style using restrained neon, horizon grids, sunset discs, and 80s-inspired type."
},
"prompt": {
"zh": [
"请以「合成波风格 / Synthwave Style」重设计这个界面。\n\n角色：你是一名擅长音乐视觉、游戏界面和复古未来品牌的 UI 设计师。\n\n场景：适合音乐播放器、游戏活动、创作者主页、夜间主题、科技活动和沉浸式封面页。\n\n视觉规则：使用深靛蓝、低饱和洋红、冷青、暮紫和少量落日橙；可以用地平线网格、圆盘、扫描线和几何光条，但必须控制数量。\n\n交互：Hover 让网格光线轻微推进，Active 用短促光条反馈；动效应顺滑，不闪眼。\n\n反例：不要做成高饱和赛博朋克，不要满屏霓虹，不要牺牲按钮和正文可读性。\n\n输出：色彩比例、背景结构、动效节奏、组件状态和反例。"
],
"en": [
"Redesign this interface in Synthwave Style.\n\nRole: You are a UI designer skilled in music visuals, game UI, and retro-futuristic brands.\n\nUse cases: music players, game campaigns, creator pages, night themes, tech events, and immersive cover pages.\n\nVisual rules: Use deep indigo, muted magenta, cool cyan, dusk violet, and small sunset orange. Horizon grids, discs, scan lines, and geometric light bars are allowed but limited.\n\nInteraction: Hover gently advances grid light; active states use short light-bar feedback. Motion should be smooth, not flashy.\n\nAvoid: saturated cyberpunk, neon everywhere, and weak button or body readability.\n\nReturn: color ratio, background structure, motion rhythm, component states, and anti-patterns."
]
},
"tip": {
"zh": "合成波可以有霓虹，但要比赛博朋克更复古、更节制。",
"en": "Synthwave can use neon, but it should feel more retro and restrained than cyberpunk."
},
"preview": {
"kind": "term-lab",
"variant": "synthwave",
"templates": 2,
"title": {
"zh": "合成波",
"en": "Synthwave"
},
"subtitle": {
"zh": "地平线网格、落日圆盘和低饱和霓虹",
"en": "Horizon grid, sunset disc, restrained neon"
},
"palette": [
"#10142b",
"#c35aa6",
"#4bc3d5",
"#f2a65a",
"#6d5dfc"
],
"chips": [
{
"label": {
"zh": "复古未来",
"en": "Retro"
},
"tone": "brand"
},
{
"label": {
"zh": "夜间",
"en": "Night"
},
"tone": "muted"
},
{
"label": {
"zh": "网格",
"en": "Grid"
},
"tone": "success"
}
]
},
"pattern": null
}
],
"meta": {
"total": 270,
"version": "1.0.0",
"source": "mianhua-ui-glossary"
}
}