{"id":"af740668-8d08-4882-8751-a7c6f98312f4","entityType":"agent","slug":"clawhub-paudyyin-frontend-design-cn","name":"前端设计","canonicalUrl":"https://www.xpersona.co/agent/clawhub-paudyyin-frontend-design-cn","canonicalPath":"/agent/clawhub-paudyyin-frontend-design-cn","generatedAt":"2026-10-11T08:43:16.896Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T06:02:55.353Z","emptyReason":null},"description":"创建独特、生产级的前端界面，追求高设计品质。当用户要求构建 网页组件、页面、海报、应用时使用（包括网站、着陆页、仪表盘、 React组件、HTML/CSS布局、美化任何Web界面）。生成有创意、 打磨精细的代码和UI设计，坚决拒绝千篇一律的\"AI审美\"。 Skill: 前端设计 Owner: paudyyin Summary: 创建独特、生产级的前端界面，追求高设计品质。当用户要求构建 网页组件、页面、海报、应用时使用（包括网站、着陆页、仪表盘、 React组件、HTML/CSS布局、美化任何Web界面）。生成有创意、 打磨精细的代码和UI设计，坚决拒绝千篇一律的\"AI审美\"。 Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-14T10:55:19.040Z | user 高设计品质前端界面构建，拒绝AI千篇一律审美 Archive index: Archive v1.0.0: 3 files, 5218 bytes Files: skill-card.md (2132b), SKILL.md (6424b), _meta.json (137b) File v1.0.0:SKILL.md --- name: fronten","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s172x1s50dh0bgmm3yc9516nr586kk4b:frontend-design-cn","sourceUrl":"https://clawhub.ai/paudyyin/frontend-design-cn","homepage":"https://clawhub.ai/paudyyin/skills/frontend-design-cn","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/paudyyin/frontend-design-cn","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/paudyyin/skills/frontend-design-cn","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":61,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"创建独特、生产级的前端界面，追求高设计品质。当用户要求构建 网页组件、页面、海报、应用时使用（包括网站、着陆页、仪表盘、 React组件、HTML/CSS布局、美化任何Web界面）。生成有创意、 打磨精细的代码和UI设计，坚决拒绝千篇一律的\"AI审美\"。 Skill: 前端设计 Owner: paudyyin Summ"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T06:02:55.353Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T06:02:55.353Z","emptyReason":null},"stars":null,"forks":null,"downloads":1139,"packageName":null,"latestVersion":"1.0.0","tractionLabel":"1.1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T06:02:55.239Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T06:02:55.353Z","lastCrawledAt":"2026-10-11T06:02:55.239Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T06:02:55.239Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.0","createdAt":"2026-05-14T10:55:19.040Z","changelog":"高设计品质前端界面构建，拒绝AI千篇一律审美","fileCount":3,"zipByteSize":5218}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s172x1s50dh0bgmm3yc9516nr586kk4b:frontend-design-cn","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-frontend-design-cn/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-frontend-design-cn/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-frontend-design-cn/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-frontend-design-cn/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-frontend-design-cn/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-frontend-design-cn/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-11T08:43:16.896Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-frontend-design-cn/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-frontend-design-cn/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-frontend-design-cn/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-paudyyin-frontend-design-cn/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T06:02:55.353Z","emptyReason":null},"readme":"Skill: 前端设计\n\nOwner: paudyyin\n\nSummary: 创建独特、生产级的前端界面，追求高设计品质。当用户要求构建 网页组件、页面、海报、应用时使用（包括网站、着陆页、仪表盘、 React组件、HTML/CSS布局、美化任何Web界面）。生成有创意、 打磨精细的代码和UI设计，坚决拒绝千篇一律的\"AI审美\"。\n\nTags: latest:1.0.0\n\nVersion history:\n\nv1.0.0 | 2026-05-14T10:55:19.040Z | user\n\n高设计品质前端界面构建，拒绝AI千篇一律审美\n\nArchive index:\n\nArchive v1.0.0: 3 files, 5218 bytes\n\nFiles: skill-card.md (2132b), SKILL.md (6424b), _meta.json (137b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: frontend-design\nversion: 1.0.0\ndescription: >\n  创建独特、生产级的前端界面，追求高设计品质。当用户要求构建\n  网页组件、页面、海报、应用时使用（包括网站、着陆页、仪表盘、\n  React组件、HTML/CSS布局、美化任何Web界面）。生成有创意、\n  打磨精细的代码和UI设计，坚决拒绝千篇一律的\"AI审美\"。\nmetadata:\n  author: 移植并优化自 Anthropic\n  category: design\n---\n\n# 前端设计大师\n\n创建让人眼前一亮、过目不忘的生产级前端界面。拒绝平庸的AI生成审美，追求有态度、有观点、有细节的设计。\n\n---\n\n## 🎯 什么时候使用\n\n**立即触发：**\n- 用户说\"帮我写个网页\"、\"做个前端页面\"\n- 用户要构建组件、仪表盘、着陆页、海报\n- 用户要美化、优化、改版现有界面\n- 用户提到React/Vue/HTML/CSS/布局等关键词\n\n**不要触发：**\n- 纯后端代码\n- 数据处理脚本\n- 非可视化的工具函数\n\n---\n\n## 🎨 设计前的关键决策\n\n**写第一行代码前，先想清楚这4件事：**\n\n### 1. 明确目的\n- 这个界面解决什么问题？\n- 谁在用它？（开发者/消费者/管理层/孩子）\n- 用户第一眼应该注意到什么？\n\n### 2. 选择大胆的美学方向（必须选一个！）\n\n| 风格 | 描述 | 适用场景 |\n|------|------|---------|\n| **极简主义** | 极致留白，少即是多，每个元素都有理由 | 高端产品、作品集 |\n| **极繁主义** | 信息爆炸，重叠，分层，视觉冲击 | 艺术节、时尚品牌 |\n| **复古未来** | 80年代电脑风，CRT效果，像素感 | 科技、游戏、NFT |\n| **有机自然** | 曲线、渐变、柔和、流动感 | 健康、生活方式 |\n| **奢华精致** | 高对比度，精细排版，黑金/白金配色 | 奢侈品、高端服务 |\n| **趣味玩具** | 圆润、明亮、可爱、互动感强 | 面向儿童、娱乐产品 |\n| **杂志编辑** | 栅格系统，大标题，图文穿插 | 媒体、博客、内容站 |\n| **粗野主义** | 原始、直接、边框、黑白为主 | 艺术、先锋品牌 |\n| **装饰艺术** | 几何图案，对称，金色点缀 | 高端活动、酒店 |\n| **柔和马卡龙** | 低饱和度，圆型，软阴影 | 社交、女性向产品 |\n| **工业实用** | 功能优先，等宽字体，仪表盘风格 | 工具、数据产品 |\n\n⚠️ **严禁：** 模糊的\"现代简约风\"。必须选一个明确的方向，并贯彻到底！\n\n### 3. 技术约束\n- 用什么框架？（纯HTML/React/Vue）\n- 性能要求？（纯CSS优先，尽量少JS）\n- 无障碍要求？\n\n### 4. 记忆点设计\n> **用户记住这个界面的那一个点是什么？**\n\n必须有且只有一个核心记忆点：\n- 一个特别的动画效果\n- 一种不寻常的布局方式\n- 一个独特的字体组合\n- 一个惊艳的背景纹理\n- 一个意想不到的交互\n\n---\n\n## 🔑 五大设计原则\n\n### 1. 字体排版：拒绝平庸\n\n✅ **应该做：**\n- 选择有性格的字体，避开Inter/Roboto/Arial这些过度使用的字体\n- 用一个有特色的标题字体 + 一个易读的正文字体\n- 字号要有层级差异（不要都是14-16px）\n- 大标题用字距（letter-spacing）制造高级感\n\n❌ **不应该：**\n- 全用系统默认字体\n- 字号差异太小，没有视觉层级\n- 一行超过80字符（阅读困难）\n\n### 2. 色彩：大胆承诺\n\n✅ **应该做：**\n- 用CSS变量确保一致性\n- 主色调占70%，辅助色20%，强调色10%\n- 大胆用单色或双色（少即是多）\n- 深色/浅色模式都考虑\n\n❌ **不应该：**\n- 紫色渐变配白色背景（烂大街了！）\n- 彩虹色，什么颜色都有\n- 对比度不够，文字看不清\n\n### 3. 动效：一击即中\n\n✅ **应该做：**\n- 页面加载用交错动画（animation-delay）\n- 滚动触发的渐入效果\n- 悬停时的小惊喜（不要太夸张）\n- 纯CSS动画优先（性能好）\n\n❌ **不应该：**\n- 到处都是微交互，分散注意力\n- 动画太长太抢戏（超过300ms）\n- 一滚动什么都在动（晕）\n\n### 4. 空间布局：打破常规\n\n✅ **应该做：**\n- 非对称布局（不要永远左右对称）\n- 元素重叠制造层次感\n- 斜向流动，打破水平垂直的单调\n- 大胆留白（或者大胆密集）\n- 偶尔有元素突破栅格\n\n❌ **不应该：**\n- 永远居中，永远12栅格，永远flex\n- 所有元素间距都一样\n- 页面像个规矩的表格\n\n### 5. 背景与细节：制造氛围\n\n✅ **可以加：**\n- 噪点纹理（grain/noise）\n- 渐变网格（gradient mesh）\n- 几何图案点缀\n- 多层透明叠加\n- 戏剧化的阴影\n- 装饰性边框\n- 自定义鼠标光标\n\n❌ **永远纯白/纯黑背景（除非是极简风格）**\n\n---\n\n## 🚫 绝对禁止的AI俗套\n\n看到这些直接重写：\n\n1. ❌ **Space Grotesk字体** - 每个AI生成的页面都在用\n2. ❌ **紫色渐变 + 白色背景** - 看吐了\n3. ❌ **永远的卡片布局** - 圆角12px，阴影，三点菜单\n4. ❌ **Hero标题永远3rem，正文永远1.25rem**\n5. ❌ **永远居中，永远flex，永远column**\n6. ❌ **\"glassmorphism\"毛玻璃滥用**\n7. ❌ **所有按钮都是蓝底白字**\n\n---\n\n## 💻 代码质量要求\n\n### 生产级标准\n- 代码可直接运行，不用用户修bug\n- 响应式设计（手机/平板/桌面）\n- 语义化HTML标签\n- 注释关键决策（为什么这样设计）\n\n### 复杂度匹配\n- **极简风格** = 代码克制，细节在间距、字重\n- **极繁风格** = 代码丰富，多层动画、装饰元素\n- 风格决定代码量，不要反过来\n\n---\n\n## 📐 交付清单\n\n每次交付必须包含：\n\n1. ✅ 完整可运行的代码（HTML/CSS/JS或组件）\n2. ✅ 设计说明（用了什么风格，核心记忆点是什么）\n3. ✅ 如果是多页面，说明页面间关系\n4. ✅ 浏览器兼容性说明（纯CSS的话基本都支持）\n\n---\n\n## 🎯 示例设计思路\n\n> **示例：数据仪表盘**\n> \n> **风格选择：工业实用风**\n> - 字体：等宽字体 + 无衬线标题\n> - 配色：深灰背景 + 霓虹色系数据高亮\n> - 布局：密集栅格，信息密度高\n> - 记忆点：数字跳动动画 + 实时进度条效果\n> - 动效：鼠标悬停时卡片轻微上浮，数据栏发光\n\n记住：**明确的观点 + 一致的执行 > 完美但平庸的设计**。\n\n---\n\n**现在，让我们开始创造让人难忘的界面吧！** 🎨✨\n\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn73z7zhz92tv6skpnmpy5pdfh86j68x\",\n  \"slug\": \"frontend-design-cn\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1778756119040\n}\n\nFile v1.0.0:skill-card.md\n\n## Description:\n\n创建独特、生产级的前端界面，追求高设计品质；当用户要求构建网页组件、页面、海报、应用时使用，并生成有创意、打磨精细的代码和UI设计。\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[paudyyin](https://clawhub.ai/user/paudyyin)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and designers use this skill to guide agents in building or improving frontend pages, components, dashboards, landing pages, posters, and other visual web interfaces. It emphasizes distinctive visual direction, responsive implementation, and production-ready HTML, CSS, JavaScript, or framework component output.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Broad frontend triggers and Chinese-language guidance may not fit workflows that require narrower UI assistance or English-only output.\n\nMitigation: Install for workflows that want strongly opinionated Chinese-language frontend design help, and review activation scope before deployment.\n\nRisk: The skill guides agents to produce runnable frontend code, so outputs may need project-specific review before use.\n\nMitigation: Review generated code, visual behavior, accessibility, and browser compatibility before shipping it in a product.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/paudyyin/skills/frontend-design-cn)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, guidance]\n\n**Output Format:** [Markdown with runnable frontend code and concise design guidance]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include HTML, CSS, JavaScript, React or Vue components, design rationale, page relationship notes, and browser compatibility notes.]\n\n## Skill Version(s):\n\n1.0.0 (source: server release and SKILL.md frontmatter)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.","readmeExcerpt":"Skill: 前端设计 Owner: paudyyin Summary: 创建独特、生产级的前端界面，追求高设计品质。当用户要求构建 网页组件、页面、海报、应用时使用（包括网站、着陆页、仪表盘、 React组件、HTML/CSS布局、美化任何Web界面）。生成有创意、 打磨精细的代码和UI设计，坚决拒绝千篇一律的\"AI审美\"。 Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-14T10:55:19.040Z | user 高设计品质前端界面构建，拒绝AI千篇一律审美 Archive index: Archive v1.0.0: 3 files, 5218 bytes Files: skill-card.md (2132b), SKILL.md (6424b), _meta.json (137b) File v1.0.0:SKILL.md --- name: fronten","codeSnippets":[],"executableExamples":[],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: frontend-design\nversion: 1.0.0\ndescription: >\n  创建独特、生产级的前端界面，追求高设计品质。当用户要求构建\n  网页组件、页面、海报、应用时使用（包括网站、着陆页、仪表盘、\n  React组件、HTML/CSS布局、美化任何Web界面）。生成有创意、\n  打磨精细的代码和UI设计，坚决拒绝千篇一律的\"AI审美\"。\nmetadata:\n  author: 移植并优化自 Anthropic\n  category: design\n---\n\n# 前端设计大师\n\n创建让人眼前一亮、过目不忘的生产级前端界面。拒绝平庸的AI生成审美，追求有态度、有观点、有细节的设计。\n\n---\n\n## 🎯 什么时候使用\n\n**立即触发：**\n- 用户说\"帮我写个网页\"、\"做个前端页面\"\n- 用户要构建组件、仪表盘、着陆页、海报\n- 用户要美化、优化、改版现有界面\n- 用户提到React/Vue/HTML/CSS/布局等关键词\n\n**不要触发：**\n- 纯后端代码\n- 数据处理脚本\n- 非可视化的工具函数\n\n---\n\n## 🎨 设计前的关键决策\n\n**写第一行代码前，先想清楚这4件事：**\n\n### 1. 明确目的\n- 这个界面解决什么问题？\n- 谁在用它？（开发者/消费者/管理层/孩子）\n- 用户第一眼应该注意到什么？\n\n### 2. 选择大胆的美学方向（必须选一个！）\n\n| 风格 | 描述 | 适用场景 |\n|------|------|---------|\n| **极简主义** | 极致留白，少即是多，每个元素都有理由 | 高端产品、作品集 |\n| **极繁主义** | 信息爆炸，重叠，分层，视觉冲击 | 艺术节、时尚品牌 |\n| **复古未来** | 80年代电脑风，CRT效果，像素感 | 科技、游戏、NFT |\n| **有机自然** | 曲线、渐变、柔和、流动感 | 健康、生活方式 |\n| **奢华精致** | 高对比度，精细排版，黑金/白金配色 | 奢侈品、高端服务 |\n| **趣味玩具** | 圆润、明亮、可爱、互动感强 | 面向儿童、娱乐产品 |\n| **杂志编辑** | 栅格系统，大标题，图文穿插 | 媒体、博客、内容站 |\n| **粗野主义** | 原始、直接、边框、黑白为主 | 艺术、先锋品牌 |\n| **装饰艺术** | 几何图案，对称，金色点缀 | 高端活动、酒店 |\n| **柔和马卡龙** | 低饱和度，圆型，软阴影 | 社交、女性向产品 |\n| **工业实用** | 功能优先，等宽字体，仪表盘风格 | 工具、数据产品 |\n\n⚠️ **严禁：** 模糊的\"现代简约风\"。必须选一个明确的方向，并贯彻到底！\n\n### 3. 技术约束\n- 用什么框架？（纯HTML/React/Vue）\n- 性能要求？（纯CSS优先，尽量少JS）\n- 无障碍要求？\n\n### 4. 记忆点设计\n> **用户记住这个界面的那一个点是什么？**\n\n必须有且只有一个核心记忆点：\n- 一个特别的动画效果\n- 一种不寻常的布局方式\n- 一个独特的字体组合\n- 一个惊艳的背景纹理\n- 一个意想不到的交互\n\n---\n\n## 🔑 五大设计原则\n\n### 1. 字体排版：拒绝平庸\n\n✅ **应该做：**\n- 选择有性格的字体，避开Inter/Roboto/Arial这些过度使用的字体\n- 用一个有特色的标题字体 + 一个易读的正文字体\n- 字号要有层级差异（不要都是14-16px）\n- 大标题用字距（letter-spacing）制造高级感\n\n❌ **不应该：**\n- 全用系统默认字体\n- 字号差异太小，没有视觉层级\n- 一行超过80字符（阅读困难）\n\n### 2. 色彩：大胆承诺\n\n✅ **应该做：**\n- 用CSS变量确保一致性\n- 主色调占70%，辅助色20%，强调色10%\n- 大胆用单色或双色（少即是多）\n- 深色/浅色模式都考虑\n\n❌ **不应该：**\n- 紫色渐变配白色背景（烂大街了！）\n- 彩虹色，什么颜色都有\n- 对比度不够，文字看不清\n\n### 3. 动效：一击即中\n\n✅ **应该做：**\n- 页面加载用交错动画（animation-delay）\n- 滚动触发的渐入效果\n- 悬停时的小惊喜（不要太夸张）\n- 纯CSS动画优先（性能好）\n\n❌ **不应该：**\n- 到处都是微交互，分散注意力\n- 动画太长太抢戏（超过300ms）\n- 一滚动什么都在动（晕）\n\n### 4. 空间布局：打破常规\n\n✅ **应该做：**\n- 非对称布局（不要永远左右对称）\n- 元素重叠制造层次感\n- 斜向流动，打破水平垂直的单调\n- 大胆留白（或者大胆密集）\n- 偶尔有元素突破栅格\n\n❌ **不应该：**\n- 永远居中，永远12栅格，永远flex\n- 所有元素间距都一样\n- 页面像个规矩的表格\n\n### 5. 背景与细节：制造氛围\n\n✅ **可以加：**\n- 噪点纹理（grain/noise）\n- 渐变网格（gradient mesh）\n- 几何图案点缀\n- 多层透明叠加\n- 戏剧化的阴影\n- 装饰性边框\n- 自定义鼠标光标\n\n❌ **永远纯白/纯黑背景（除非是极简风格）**\n\n---\n\n## 🚫 绝对禁止的AI俗套\n\n看到这些直接重写：\n\n1. ❌ **Space Grotesk字体** - 每个AI生成的页面都在用\n2. ❌ **紫色渐变 + 白色背景** - 看吐了\n3. ❌ **永远的卡片布局** - 圆角12px，阴影，三点菜单\n4. ❌ **Hero标题永远3rem，正文永远1.25rem**\n5. ❌ **永远居中，永远flex，永远column**\n6. ❌ **\"glassmorphism\"毛玻璃滥用**\n7. ❌ **所有按钮都是蓝底白字**\n\n---\n\n## 💻 代码质量要求\n\n### 生产级标准\n- 代码可直接运行，不用用户修bug\n- 响应式设计（手机/平板/桌面）\n- 语义化HTML标签\n- 注释关键决策（为什么这样设计）\n\n### 复杂度匹配\n- **极简风格** = 代码克制，细节在间距、字重\n- **极繁风格** = 代码丰富，多层动画、装饰元素\n- 风格决定代码量，不要反过来\n\n---\n\n## 📐 交付清单\n\n每次交付必须包含：\n\n1. ✅ 完整可运行的代码（HTML/CSS/JS或组件）\n2. ✅ 设计说明（用了什么风格，核心记忆点是什么）\n3. ✅ 如果是多页面，说明页面间关系\n4. ✅ 浏览器兼容性说明（纯CSS的话基本都支持）\n\n---\n\n## 🎯 示例设计思路\n\n> **示例：数据仪表盘**\n> \n> **风格选择：工业实用风**\n> - 字体：等宽字体 + 无衬线标题\n> - 配色：深灰背景 + 霓虹色系数据高亮\n> - 布局：密集栅格，信息密度高\n> - 记忆点：数字跳动动画 + 实时进度条效果\n> - 动效：鼠标悬停时卡片轻微上浮，数据栏发光\n\n记住：**明确的观点 + 一致的执行 > 完美但平庸的设计**。\n\n---\n\n**现在，让我们开始创造让人难忘的界面吧！** 🎨✨"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn73z7zhz92tv6skpnmpy5pdfh86j68x\",\n  \"slug\": \"frontend-design-cn\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1778756119040\n}"},{"path":"skill-card.md","content":"## Description:\n\n创建独特、生产级的前端界面，追求高设计品质；当用户要求构建网页组件、页面、海报、应用时使用，并生成有创意、打磨精细的代码和UI设计。\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[paudyyin](https://clawhub.ai/user/paudyyin)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and designers use this skill to guide agents in building or improving frontend pages, components, dashboards, landing pages, posters, and other visual web interfaces. It emphasizes distinctive visual direction, responsive implementation, and production-ready HTML, CSS, JavaScript, or framework component output.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Broad frontend triggers and Chinese-language guidance may not fit workflows that require narrower UI assistance or English-only output.\n\nMitigation: Install for workflows that want strongly opinionated Chinese-language frontend design help, and review activation scope before deployment.\n\nRisk: The skill guides agents to produce runnable frontend code, so outputs may need project-specific review before use.\n\nMitigation: Review generated code, visual behavior, accessibility, and browser compatibility before shipping it in a product.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/paudyyin/skills/frontend-design-cn)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, guidance]\n\n**Output Format:** [Markdown with runnable frontend code and concise design guidance]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include HTML, CSS, JavaScript, React or Vue components, design rationale, page relationship notes, and browser compatibility notes.]\n\n## Skill Version(s):\n\n1.0.0 (source: server release and SKILL.md frontmatter)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"创建独特、生产级的前端界面，追求高设计品质。当用户要求构建 网页组件、页面、海报、应用时使用（包括网站、着陆页、仪表盘、 React组件、HTML/CSS布局、美化任何Web界面）。生成有创意、 打磨精细的代码和UI设计，坚决拒绝千篇一律的\"AI审美\"。 Skill: 前端设计 Owner: paudyyin Summary: 创建独特、生产级的前端界面，追求高设计品质。当用户要求构建 网页组件、页面、海报、应用时使用（包括网站、着陆页、仪表盘、 React组件、HTML/CSS布局、美化任何Web界面）。生成有创意、 打磨精细的代码和UI设计，坚决拒绝千篇一律的\"AI审美\"。 Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-14T10:55:19.040Z | user 高设计品质前端界面构建，拒绝AI千篇一律审美 Archive index: Archive v1.0.0: 3 files, 5218 bytes Files: skill-card.md (2132b), SKILL.md (6424b), _meta.json (137b) File v1.0.0:SKILL.md --- name: fronten","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":650,"uniquenessScore":66,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T06:02:55.353Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T06:02:55.353Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-11T08:43:16.896Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}