fize

A UI design specification system based on off-the-shelf UI frameworks (Element Plus, Ant Design, Arco Design, TDesign, Semi Design). Suitable for projects using framework-built-in components, as opposed to headless component libraries (shadcn/ui, Radix UI). Use when: generating UI code with a specified framework, reviewing existing code for framework compliance, recommending between frameworks, or migrating code from one framework to another. Keywords: Element Plus, Ant Design, Arco Design, TDesign, Semi Design, framework components, Vue components, React components, framework migration, design tokens, theme variables.

End-to-end brand visual identity (VI) design methodology — a six-stage workflow from brand soul discovery to visual identity system building and multi-touchpoint brand manual delivery. Covers core concept, logo design, color strategy, typography, graphic language, and touchpoint application. Use when: designing brand identity, visual identity systems (VI), logo design, brand guidelines, or brand manuals. Keywords: brand identity, VI设计, 品牌视觉系统, 品牌VI, logo design, 品牌设计, 品牌手册, brand guidelines.

Comprehensive multi-domain color design system — covering both digital product UI (semantic CSS color tokens, dark/light mode, WCAG AA contrast) and graphic/print design (CMYK/Pantone specs, print paper absorption & spot colors, 60-30-10 harmony rules, emotional poster & packaging palettes). Use when: configuring color tokens, generating tokens.css, designing dark/light mode palettes, or determining CMYK/Pantone colors for graphic, poster, and packaging print materials. Keywords: color system, 色彩系统, 配色方案, color tokens, dark mode, light mode, 平面设计配色, 印刷色彩, CMYK, Pantone, 包装配色, 海报配色.

Commercial and e-commerce image generation methodology — three-layer prompt engineering framework (subject-scene / style-texture / technical-constraints) covering both global cross-border platforms (Amazon, Shopify, SHEIN, TikTok, Instagram) and domestic Asian markets (Taobao, JD, Xiaohongshu, WeChat). Includes multi-platform templates and iterative optimization strategies. Use when: generating product photos, marketing posters, e-commerce covers, or commercial AI visuals. Keywords: e-commerce image, product photography, commercial prompts, SHEIN, Amazon, Shopify, 淘宝主图, 营销海报, 小红书封面, 生图提示词.

A highly customizable UI design specification system based on headless component libraries (shadcn/ui, Radix UI), integrating Apple HIG, Microsoft Fluent, and Google Material Design. Unlike using off-the-shelf frameworks (Ant Design, Element Plus), this skill is for scenarios requiring full control over component styles and DOM structure, emphasizing design freedom and brand customization. Use when: generating custom UI code, reviewing custom UI designs, or needing to follow platform-specific design guidelines. Supports HIG / Fluent / Material / All specification modes. Keywords: shadcn/ui, Radix UI, headless, custom components, HIG, Fluent, Material Design.

Graphic design deep research: automatically collects design references across domestic and international platforms (Behance, Dribbble, Pinterest, Zcool, Huaban), performs cluster analysis on aesthetic trends, and outputs visual HTML research reports with reusable exploratory prompts. Use when: researching design directions, analyzing visual trends, gathering inspiration moodboards, or exploring visual styles. Keywords: 设计调研, 灵感调研, 风格调研, 视觉参考, 情绪板, design research, aesthetic trends, moodboard.