axi-front-design-skill：將 Claude 轉化為資深設計師的 AI 技能 | Transforming Claude into a Senior Designer AI Skill

打破 AI 俗套，用 HTML 打造高保真設計原型的極簡工作流。 | Breaking AI clichés with a minimalist workflow for high-fidelity HTML design artifacts.

🔎 工具速覽 / AT A GLANCE

Category	AI Development Tool / Design Skill
Pricing	Free (MIT License)
BestFor	Product Managers, Frontend Developers, Solo Founders
GitHub Stars	⭐ 40

🚀 引言 / Introduction

axi-front-design 不僅僅是一個前端代碼生成工具，它是一個讓 Claude 扮演『資深設計師』而非『通用工程師』的專業技能集。它專注於產出具有商業美感且擺脫 AI 廉價感的 HTML 高保真設計稿。 | axi-front-design is more than a frontend code generator; it is a specialized skill set that transforms Claude into a 'Senior Designer' rather than a 'Generic Engineer,' focusing on producing commercially aesthetic, high-fidelity HTML artifacts that avoid typical AI clichés.

🛠️ 核心功能 / Key Features

Diverse Outputs: Supports landing pages, Pitch Decks, interactive prototypes, motion demos, and infographics.

多樣化輸出：支持落地頁、Pitch Deck 幻燈片、交互原型、產品動效及信息圖。

Design System Sync: Automatically extracts tokens (colors, fonts, spacing) from the codebase to ensure visual consistency.

設計系統同步：自動從代碼庫中提取 Token（顏色、字體、間距），確保視覺一致性。

Variant Delivery: Provides 3+ design directions by default, allowing users to mix and match at the atomic level.

多變體交付：默認提供 3 種以上設計方向，允許用戶在原子級別進行拼配。

Rapid Iteration Workflow: Employs an agile workflow of 'Questioning → System Definition → Draft Delivery → Iteration'.

快速迭代流程：採用『提問 → 確立系統 → 交付草稿 → 迭代』的敏捷工作流。

💡 技術亮點 / Tech Highlights

Anti-AI Clichés: Strictly prohibits the overuse of gradients, excessive emojis, and outdated fonts, pursuing a professional minimalist aesthetic.

反 AI 俗套：嚴格禁用濫用漸變、過多 Emoji 及過時字體，追求專業簡約感。

Designer Mindset: Prioritizes clarifying requirements and establishing design specifications before writing code.

設計師思維：先問需求後執行，優先建立設計規範而非直接寫代碼。

Instant Visualization: Emphasizes early delivery and immediate previewing to avoid long 'black-box' development cycles.

即時可視化：強調早交付、早看效果，避免長時間黑盒開發。

📦 快速上手 / Quick Start

Installation: Place SKILL.md into your Claude Code skills directory.

安裝：將 SKILL.md 放置於 Claude Code skills 目錄中。

Configuration: Register the skill in .claude/settings.json.

配置：在 .claude/settings.json 中註冊該技能。

Invocation: Use the /axi-front-design command or trigger phrases (e.g., 'make a landing page') to activate.

調用：使用 /axi-front-design 指令或輸入觸發詞（如『做個落地頁』) 啟動。

準備好試試 axi-front-design-skill：將 Claude 轉化為資深設計師的 AI 技能 | Transforming Claude into a Senior Designer AI Skill 了嗎？

Ready to try axi-front-design-skill：將 Claude 轉化為資深設計師的 AI 技能 | Transforming Claude into a Senior Designer AI Skill?

前往 GitHub 頁面 →