Web Design Taste
帮助没有设计背景、不懂技术术语的用户做出设计师级高质量网页。用户只需用大白话描述需求，通过选择预设风格卡片（而非描述设计），即可产出完整可运行的网页。每当用户提到"做个网页"、"做个网站"、"落地页"、"作品集"、"介绍页"、"官网"、"销售页"，或表达"想要好看的页面但不知道怎么形容"时，必须使用此技能。即使用户没有提供任何设计要求，也要使用此技能来引导。
Install
npx skills add Alice59357/web-design-taste --skill web-design-tastegit clone --depth 1 https://github.com/Alice59357/web-design-taste.git /tmp/web-design-taste
mkdir -p ~/.claude/skills
cp -r /tmp/web-design-taste/. ~/.claude/skills/web-design-tastePersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# 网页审美工作流（web-design-taste） 这个 skill 的核心理念：**用户不需要懂设计和技术，只需要回答人话问题、从卡片里做选择、用感受词反馈。** 所有专业翻译工作由 Claude 完成。 用户是内容创业者，不是工程师。全程禁止对用户使用以下词汇（可以在代码里用，但不能要求用户理解）：React、Vite、组件、响应式、hex、padding、栅格、DOM。如果必须提及，用人话解释。 ## 工作流：五步走 ### 第一步：人话访谈（禁止跳过，禁止直接写代码） 用轻松的语气问，一次最多问 3 个问题，根据回答追问。必须搞清楚： 1. **这个页面给谁看？** （潜在学员？合作方？粉丝？） 2. **看完之后，你希望对方做什么或产生什么感觉？** （扫码加微信？觉得你专业？记住你这个人？） 3. **你手上有什么素材？** （照片、视频、文字介绍、logo——没有也没关系，先用占位内容做出来） 4. **页面叫什么名字，主角是谁？** 如果对话上下文里已经有答案（比如用户之前聊过业务），直接确认而不是重复问。 ### 第二步：出示风格卡片，让用户选 读取 `references/style-cards.md`，根据访谈结果**推荐 2-3 张最匹配的卡片**，每张用一两句人话描述气质，并说明"为什么这张适合你这个场景"。 用户可以： - 直接选一张 - 说"像 A 但更 B 一点"（比如"像苹果那张但暖一点"）——此时以 A 为基础，微调对应参数 - 都不满意——追问他喜欢的品牌/杂志/人物，现场组一张新卡片 **绝不让用户凭空描述想要的风格。选择题，不是填空题。** ### 第三步：内部设计规划（不展示给用户） 选定卡片后，在动手写代码前，在思考中完成设计规划： 1. 从卡片中提取设计令牌：配色（4-6 个具名色值）、字体（标题/正文/辅助三个角色）、排版密度、签名元素 2. 用卡片里的"签名元素"确定这个页面唯一的记忆点，其余部分保持克制 3. 自我审查：如果这个方案换一个客户也成立，说明太模板化了，回去修改 4. 严格遵循 `references/tech-base.md` 里的技术底座，技术选型不需要问用户 ### 第四步：交付基础版 - 一次性交付**完整可运行、可预览**的版本，绝不交付半成品 - 没有素材的地方用有质感的占位内容（真实感文案 + 色块/渐变占位图），并明确列出"以下位置等你提供素材：……" - 交付时用人话总结：这个页面分几屏、每屏干什么、点什么按钮会发生什么 ### 第五步：感受式迭代 告诉用户："**你不需要说专业术语，直接说感受就行**，比如'这里看着挤'、'颜色有点脏'、'不够高级'。" 收到感受词后，读取 `references/feeling-translation.md`，将感受翻译成具体设计修改动作，执行修改，并简单告诉用户你改了什么（用人话）。 如果用户的反馈很模糊（比如"就是感觉不对"），不要瞎猜，给出 2-3 个具体的修改方向让他选。 ## 附属文件索引 - `references/style-cards.md` —— 7 张预设风格卡片，含完整设计令牌。第二步和第三步必读。 - `references/feeling-translation.md` —— 感受词到设计动作的翻译表。第五步迭代时必读。
Details
- Skill name
web-design-taste- Repository
- Alice59357/web-design-taste
- Repo updated
- 7 July 2026
FAQ
What does the Web Design Taste skill do?
帮助没有设计背景、不懂技术术语的用户做出设计师级高质量网页。用户只需用大白话描述需求，通过选择预设风格卡片（而非描述设计），即可产出完整可运行的网页。每当用户提到"做个网页"、"做个网站"、"落地页"、"作品集"、"介绍页"、"官网"、"销售页"，或表达"想要好看的页面但不知道怎么形容"时，必须使用此技能。即使用户没有提供任何设计要求，也要使用此技能来引导。
How do I install the Web Design Taste skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add Alice59357/web-design-taste --skill web-design-taste. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Web Design Taste popular?
It lives in Alice59357/web-design-taste, which has 8 GitHub stars and 1 forks.
Related skills
Brand Yml
7stephenturner/skill-brand-yml
Create a _brand.yml file for Quarto projects that captures brand colors, typography, and identity in a structured YAML format. Use this skill whenever the user mentions _brand.yml, brand.yml, Quarto branding, brand identity for Quarto, or wants consistent colors and fonts across Quarto documents, websites, presentations, or Shiny apps. Also trigger when the user asks to extract brand colors or fonts from a website, PDF brand guidelines, or style guide for use with Quarto. Even if the user just says "set up my brand" or "make my Quarto docs match our brand," this is the right skill.
UI Craft
9Achref23illi/ui-craft
Make a mobile UI look and feel like a shipped app. Rules with numbers, 29 screen recipes (plus 200 measured ones), a fast screenshot review and lessons from a real redesign, grounded in 4,500 iOS screens from 78 apps (Spotify, Airbnb, Instagram, Apple Music, Wise, Coinbase, Google Maps, Uber Eats, Halide, Notion…). Use before designing or restyling any mobile screen (React Native, Expo, SwiftUI, Flutter, mobile web), when reviewing screenshots for "does this look like a real app", or when you need a reference for a pattern (feed, player, editor, sheet, paywall, settings, onboarding, empty stat
Motion Ref
7joepUI/motion-ref-skill
UI 动效参考库，帮你给产品加上合适的动画。不需要懂动效 — 描述你的产品场景（页面加载慢、用户点了没反应、想让页面高级一点），直接推荐方案 + 代码。触发词：页面没动画、交互没反馈、怎么加动效、让页面动起来、加载太慢怎么办、想让产品高级一点、motion ref。
Terminal UI Design System
9chyinan/terminal-ui-design-system
Create terminal-inspired UI interfaces with macOS-style window decorations, monospace typography, and a warm color palette. Use this skill when building developer tools, code marketplaces, technical documentation sites, or any interface that benefits from a terminal/command-line aesthetic. Provides complete design system specifications including color palette, typography, spacing, components, and CSS implementation details.
Compliance Auditor
8FuzulsFriend/compliance-auditor
Use this skill whenever the user asks for a privacy policy, terms of service, cookie policy, accessibility statement, GDPR / CCPA / COPPA / Israel PPL / UK GDPR review, sub-processor list, or any "make my site compliant" task. Also trigger when the user mentions Privacy Policy, Terms, ToS, ToU, "legal pages", compliance audit, data processing agreement, DPA, DPIA, consent flow, cookie banner, CAN-SPAM footer, data retention, breach-notification, or regulator names (EDPB, ICO, CPPA, FTC, Israeli PPA). The skill runs a deterministic multi-agent pipeline - researches primary-source regulator requ
Shopify Theme Builder
8moVictor99/shopify-theme-builder
Build a complete, clean, Online Store 2.0 Shopify theme from a guided requirements interview. Use when a user wants to build, generate, scaffold, or design a Shopify theme, Shopify sections, JSON templates, Liquid, section groups, or a fully theme-editor-controllable storefront (including bilingual / RTL Arabic stores). Produces a zip-ready theme that passes theme-check and meets Shopify Theme Store requirements.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.