Overview
产品概述
Capabilities
核心能力
AI 驱动的设计推荐
根据用户输入的产品类型、风格、页面目标和 CTA,自动检索设计数据库,并输出配色、字体、排版、落地页结构和 UX 规则等推荐。
可检索的设计智能数据库
收录 57 种 UI 风格、95 套配色、56 组字体配对、24 种图表类型和 29 种落地页模式,支持按需检索和参考。
多技术栈最佳实践
针对 React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter 和 Tailwind CSS 提供框架特定的模式、状态管理和性能建议,并输出代码示例。
从提示词到生产代码
通过 6 步智能流程,将产品描述转化为包含风格、字体、配色和 CTA 的界面代码,并附 SVG 图标、悬停反馈、深色模式对比和响应式布局等质量检查。
Use Cases
适用场景
-
01
快速搭建落地页
输入如“宠物美容服务的落地页”等提示词,获得包含风格、字体、配色和 CTA 的完整界面设计建议与代码。
-
02
产品专属视觉方案
为 SaaS、电商、医疗、金融科技等产品选择匹配的配色系统,并搭配字型与风格。
-
03
数据可视化选型与落地
根据数据类型推荐折线图、柱状图、饼图、热力图等图表,并给出 Chart.js、Recharts、D3.js 等库建议和无障碍说明。
Integrations
集成能力
Claude Code
作为 Claude Code 兼容的 skill 使用,可在 Claude Code 环境中直接调用设计智能。
Google Fonts
字体配对建议支持 Google Fonts 集成,便于直接使用对应的字体资源。
Tailwind CSS
提供 Tailwind 配置与工具类建议,可生成 Tailwind 风格的响应式界面代码。
Chart.js / Recharts / D3.js
在数据可视化场景中推荐这些 JavaScript 图表库,并附带无障碍提示。