Skip to content
UXClaim
Design Systems

Flat Design System

Claude Code skill for building UIs in the instyle.group flat design system with warm-neutral palette, 8px grid, and superellipse corners.

View source More in Design Systems

What it does

This Claude Code skill teaches Claude how to build interfaces following the instyle.group flat design system — a minimalist approach using warm-neutral colors where background-color steps (not borders or shadows) separate regions. The system includes an 8px grid, Lato + Noto Sans JP typography, Major Third type scale, and superellipse corners.

How it works

When you ask Claude for a “flat dashboard” or similar design request, the skill auto-triggers. It provides drop-in CSS tokens and component snippets, a full design specification, and a project bootstrap template. The skill includes all brand assets (logo, favicon, OGP) and a live preview HTML file to see the target design.

Use cases

  • Generate flat-style dashboards, landing pages, and reports
  • Bootstrap new projects that adopt the flat design system long-term
  • Maintain consistent styling across multi-page designs
  • Build in both English and Japanese with automatic language support

Who benefits

Product designers and design teams using Claude Code to prototype interfaces. Teams adopting the instyle.group brand system benefit from instant consistency and faster iteration cycles.

Frequently asked questions

How do I install the flat design system skill?
Clone the repository to ~/.claude/skills/skill-design-system-flat. Claude Code automatically picks up skills from this directory on session start—no registration needed.
What's the difference between flat and liquid design systems?
The flat system uses warm-neutral colors and background steps for separation. The sister skill, skill-design-system-liquid, provides a translucent/glassy variant of the same brand identity.
Can I use this skill in multiple languages?
Yes. The skill supports both English and Japanese prompts. Ask Claude for "フラットなダッシュボード" or "Build a flat dashboard" and the skill will respond appropriately.
What CSS resources does the skill include?
The skill provides tokens.css (design variables), snippets.css (component styles for cards, buttons, inputs, type scale), and a full design specification in design.md for deeper reference.
How do I bootstrap a new project with this system?
Ask Claude to 'bootstrap a new project with skill-design-system-flat'. It will set up CLAUDE.md, CSS files, fonts, and basic layout automatically.
Can I preview the flat design system before using it?
Yes. Open examples/preview.html in any modern browser (Chrome, Edge, Safari) to see a reference implementation with all components.
What typography does the flat design system use?
The system uses Lato for English and Noto Sans JP for Japanese text, following a Major Third type scale for consistent sizing.
Are the instyle.group brand assets included?
Yes. The skill includes logo, favicon, and OGP images in the assets folder. These are licensed for use only in instyle.group projects.

Glossary

Auto-trigger
A skill feature where Claude automatically activates when it detects relevant keywords in your prompt, like 'flat dashboard' or 'flat design'.
Superellipse corners
A smooth, rounded corner shape that curves more gradually than standard border-radius, creating a softer, more refined aesthetic.
Design tokens
Reusable design variables (colors, spacing, typography) stored in CSS that ensure consistency across all UI components.
8px grid
A spacing system where all measurements are multiples of 8 pixels, creating visual rhythm and alignment consistency.
Major Third type scale
A typographic sizing system based on the 1.25 ratio, creating harmonious proportions between different text sizes.

More in Design Systems

All →
Design Systems

Claude Code Agent Design Kit

AI-powered multi-agent design system generator that creates production-ready UI components, design tokens, and documentation from natural language briefs.

MichelSR25
Design Systems

Claude Code Design Kit

AI-powered multi-agent design system generator that creates production-ready UI components, design tokens, and documentation from natural language descriptions.

MichelSR25
Design Systems

Claude Design Studio Toolkit

AI-powered design co-pilot with responsive UI engine, design tokens, accessibility validation, and multi-agent workflows for code-first design teams.