frontend-design-pro

商品介绍

# Frontend Design Pro Plugin An advanced frontend design plugin for Claude Code with interactive wizard, trend research, moodboard creation, browser-based inspiration analysis, and color/typography selection. ## Features - **6 Skills** for comprehensive design workflow - **3 Commands** for common design tasks - **Browser Integration** via claude-in-chrome for live analysis - **Fallback Mode** when browser unavailable - **Anti-Pattern Detection** to avoid generic "AI slop" - **WCAG Accessibility** built into every design ## Installation Add to your Claude Code settings: ```json { "plugins": [ "https://github.com/davepoon/buildwithclaude/tree/main/plugins/frontend-design-pro" ] } ``` ## Skills ### trend-researcher Research latest UI/UX trends from Dribbble and design communities. **Topics covered:** - Trending design patterns - Color trends - Typography trends - Layout patterns - What to avoid ### moodboard-creator Create visual moodboards from collected inspiration with iterative refinement. **Topics covered:** - Synthesizing research - Color direction - Typography direction - UI patterns - Mood keywords ### design-wizard Interactive wizard that guides through a complete design process. **Topics covered:** - Discovery questions - Aesthetic selection - Color mapping - Typography pairing - Code generation - Self-review ### inspiration-analyzer Analyze websites for design inspiration using browser automation. **Topics covered:** - Color palette extraction - Typography identification - Layout patterns - UI element analysis - Motion detection ### color-curator Browse and select color palettes from Coolors or curated fallbacks. **Topics covered:** - Coolors integration - Color psychology - Palette mapping - Tailwind config generation - Accessibility compliance ### typography-selector Browse and select fonts from Google Fonts or curated pairings. **Topics covered:** - Google Fonts integration - Font pairing strategies - Type scale - Performance optimization - Tailwind config generation ## Commands ### /frontend-design-pro:design Full interactive design workflow. ``` /frontend-design-pro:design ``` Guides you through: 1. Discovery questions 2. Trend research (optional) 3. Moodboard creation 4. Color selection 5. Typography selection 6. Code generation 7. Quality review ### /frontend-design-pro:analyze-site Quick website analysis for inspiration. ``` /frontend-design-pro:analyze-site https://linear.app ``` Extracts: - Color palette - Typography - Layout patterns - UI elements - Key takeaways ### /frontend-design-pro:review Review generated designs for quality. ``` /frontend-design-pro:review ./landing-page.html ``` Checks: - Anti-patterns - Design principles - Accessibility - Provides fix recommendations ## Directory Structure ``` frontend-design-pro/ ├── .claude-plugin/ │ └── plugin.json ├── skills/ │ ├── trend-researcher/ │ │ └── SKILL.md │ ├── moodboard-creator/ │ │ └── SKILL.md │ ├── design-wizard/ │ │ ├── SKILL.md │ │ └── references/ │ │ ├── design-principles.md │ │ ├── aesthetics-catalog.md │ │ ├── anti-patterns.md │ │ └── accessibility-guidelines.md │ ├── inspiration-analyzer/ │ │ ├── SKILL.md │ │ └── references/ │ │ └── extraction-techniques.md │ ├── color-curator/ │ │ ├── SKILL.md │ │ └── references/ │ │ └── color-theory.md │ └── typography-selector/ │ ├── SKILL.md │ └── references/ │ └── font-pairing.md ├── commands/ │ ├── design.md │ ├── analyze-site.md │ └── review.md └── README.md ``` ## Comparison with Official Plugin | Feature | Official | frontend-design-pro | |---------|----------|---------------------| | Skills | 1 | 6 | | Commands | 0 | 3 | | Interactive wizard | ❌ | ✅ | | Trend research | ❌ | ✅ Dribbble | | Moodboard creation | ❌ | ✅ | | Website analysis | ❌ | ✅ Browser | | Color selection | ❌ | ✅ Coolors | | Font selection | ❌ | ✅ Google Fonts | | Self-review | ❌ | ✅ | | Fallback mode | N/A | ✅ | | Accessibility guide | Brief | ✅ Full WCAG | | Anti-patterns | Brief list | ✅ Detailed + code | | Aesthetic catalog | Mentioned | ✅ 11 styles + code | ## Anti-Patterns Detected The plugin helps you avoid: - ❌ Hero badges/pills ("New", "AI-Powered") - ❌ Generic fonts (Inter, Roboto, Arial) - ❌ Purple/blue gradients on white - ❌ Decorative blob shapes - ❌ Excessive rounded corners - ❌ Predictable template layouts - ❌ Generic tech startup aesthetics ## Aesthetic Directions Choose from 11+ curated aesthetics: **Modern:** - Dark & Premium - Glassmorphism - Neobrutalism - Bento Grid **Retro:** - Brutalist/Editorial - Y2K/Cyber **Cultural:** - Swiss Typography - Scandinavian Minimal - Japanese Zen **Stripped-Down:** - Statement Hero - Type-Only ## Usage Examples ### Quick Landing Page ``` User: Create a landing page for my developer tool /frontend-design-pro:design ``` Claude will: 1. Ask about your project and audience 2. Research current design trends 3. Create a moodboard for approval 4. Help select colors from Coolors 5. Help select fonts from Google Fonts 6. Generate production-ready HTML 7. Review for anti-patterns and accessibility ### Analyze Competition ``` User: I like Linear's design, analyze it for me /frontend-design-pro:analyze-site https://linear.app ``` Claude will: 1. Visit the site in browser 2. Take screenshots 3. Extract colors, fonts, patterns 4. Document key design decisions 5. Provide actionable takeaways ### Review Existing Design ``` User: Check my design for issues /frontend-design-pro:review ./my-landing-page.html ``` Claude will: 1. Check for anti-patterns 2. Validate design principles 3. Audit accessibility 4. Provide score and recommendations ## Browser Requirements For full functionality, install the [Claude in Chrome](https://chromewebstore.google.com/detail/claude-in-chrome) extension. Without browser access, the plugin: - Still runs interactive wizard - Uses curated color palettes - Uses curated font pairings - Skips live website analysis - Provides all code generation features ## Output Format All generated designs are: - Single HTML file with Tailwind CDN - Custom Tailwind config for colors/fonts - Google Fonts imports - Mobile-responsive - WCAG accessible - Production-ready quality ## Contributing Contributions welcome! Please follow the existing skill structure and include: - SKILL.md with frontmatter and core content - References for detailed documentation - Examples with working code patterns ## License MIT

价格

以上为公开标价。你的组织可能有协议价，以控制台显示的价格为准。

如何使用

1. 1

   为组织安装

   开通即安装：组织固定使用开通时的版本（当前为 1.0.1），它包含的商品会一并开通。

2. 2

   创建凭证

   客户端使用组织凭证读取；绑定到数字人后，数字人使用绑定凭证按需加载。请求中携带：

   Authorization: Bearer $ZGI_MARKET_KEY

3. 3

   读取清单与安装包

   清单列出版本、文件和校验值；安装包是一个 zip 文件。

   curl "https://market-api.zgi.im/v1/market/plugins/frontend-design-pro/manifest" \
     -H "Authorization: Bearer $ZGI_MARKET_KEY"

   curl "https://market-api.zgi.im/v1/market/plugins/frontend-design-pro/package" \
     -H "Authorization: Bearer $ZGI_MARKET_KEY" \
     -o frontend-design-pro.zip

   读取清单和下载安装包不计入用量。下载后请用响应头中的 SHA-256 校验文件。

插件清单

名称

frontend-design-pro

版本

1.0.0

作者

BuildWithClaude Community

说明

Advanced frontend design plugin with interactive wizard, trend research, moodboard creation, color/typography selection, and browser-based inspiration analysis

格式

Claude CodeAgent Plugins（Codex 等）

安装包

附带可安装的插件包

插件包内容

技能

6

命令

0

智能体

0

MCP 服务

0

钩子

0

• 技能color-curator
• 技能design-wizard
• 技能inspiration-analyzer
• 技能moodboard-creator
• 技能trend-researcher
• 技能typography-selector

来源与审核

审核状态

尚未审核，内容来自上游来源

来源文档

https://github.com/davepoon/buildwithclaude

源代码仓库

https://github.com/davepoon/buildwithclaude

许可证

MIT

审核状态是平台对上架信息的记录，不构成对上游服务质量或可用性的担保。