diddysister/axi-front-design

axi-front-design is a Claude Code Skill, meaning a small instruction file you drop into Claude Code so that it changes how the assistant behaves on certain prompts. The author's goal is to make Claude act like a senior designer rather than a generic frontend engineer, and the output is always high-fidelity HTML rather than design files in PPTX or Figma format. The README is written in both Chinese and English and lists the kinds of things the skill is meant to produce: landing pages and marketing pages, slide decks, interactive UI prototypes, short product motion demos, infographics or posters, and mobile mockups or UI kits. Specific trigger phrases in either language, such as 'design a landing page', 'make a deck', or 'prototype this UI', cause the skill to activate. Installation is plain. You place SKILL.md inside a skills/axi-front-design/ folder in your project, then register the path in .claude/settings.json under a 'skills' list. After that, you either invoke it directly with /axi-front-design followed by a brief, or you just describe what you want and one of the trigger phrases switches the skill on. The workflow the author wants Claude to follow is: ask clarifying questions first through a popup, read design tokens like colors, fonts, and spacing from the existing codebase rather than inventing them, write those decisions at the top of the file before writing components, ship a rough skeleton early so the user can open it in a browser, and finish by offering at least three variants. The README also lists hard constraints meant to fight common AI design habits: no purple-pink-blue gradient backgrounds, no decorative emoji, no overused fonts like Inter or Roboto or Arial, no SVG hand-drawn illustrations, no filler statistics or icons, and no padding sections just to fill space. It also names cases the skill is not for, including pure text replies, real image generation, and exporting to PPTX or Figma. The license is MIT.