allierays

Styleguide — Design skill for Claude Code

Design community

Generate a complete HTML/React styleguide page for your project based on your design preferences.

How to install Styleguide

Installs to ~/.claude/commands/allierays-agentic-loop-styleguide.md

Terminal

mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/allierays/agentic-loop/HEAD/.claude/commands/styleguide.md -o ~/.claude/commands/allierays-agentic-loop-styleguide.md

Restart Claude Code, or start a new session, for it to be picked up.

What Styleguide does

description: Generate a complete HTML/React styleguide page for your project based on your design preferences.

Styleguide Generator

Generate a complete HTML/React styleguide page for your project based on your design preferences.

Instructions

This skill creates a `/styleguide` route that displays all your UI components, making it easy for AI to understand and replicate your design system.

Phase 1: Discovery

First, understand the project:

**Check the tech stack:**

Look f

Alternatives in Design

Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Huashu Design — Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 23.6k ★
NotebookLM Automation — Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI 6.8k ★