skills.rest
KorroAi
KorroAiCOMMUNITY
Explore all skills by this author →
Website𝕏@korrocorpGitHub

korrodesign

Guides a 7-phase website design process and enforces UI quality with a 14-rule ESLint plugin.

24|1|Updated Jun 22, 2026
Search Tags:#code generation#design system#next.js#tailwind css#web design#ui quality#eslint plugin
One-click install
npx skills add https://github.com/KorroAi/korrodesign --skill korrodesign-korroai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: korrodesign
Source: https://github.com/KorroAi/korrodesign
Command: npx skills add https://github.com/KorroAi/korrodesign --skill korrodesign-korroai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI code generators produce visually generic websites with structural UI violations like div-as-button, pure black colors, h-screen layouts, and default Tailwind palettes. This Skill enforces design quality during generation via in-context rules and after generation via AST-level linting. ## Core Features & Use Cases - 7-Phase Design Pipeline: Asset generation, creative brief, configuration, design council, execution plan, generation, and blind spot audit, turning Claude into a creative director. - Taste Guardian Rules: 500+ lines of typography, color, animation, and micro-interaction rules synthesized from 6 design philosophies, applied during code generation with zero dependencies. - Blind Spot ESLint Plugin: 14 rules (no-div-as-button, no-pure-black, no-h-screen, no-emoji-in-ui, and more) that check UI structural integrity at the AST level in CI. - Use Case: Ask Claude to design a landing page for a SaaS product; it interviews you through the brief, proposes three creative directions, generates a Next.js 15 + Tailwind implementation, then audits the output with the ESLint plugin. ## Quick Start Ask Claude to start the korrodesign process for your website idea and answer its creative brief questions one at a time.

Frequently Asked Questions about korrodesign

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install and use the korrodesign skill in Claude Code?▼

Clone the repository into ~/.claude/skills/korrodesign and invoke /korrodesign in Claude Code. Claude then guides you through the 7-phase design process from creative brief to final audit, with no API keys required.

What does the Blind Spot ESLint plugin check in UI code?▼

It runs 14 AST-level rules including no-div-as-button, no-pure-black, no-h-screen, no-emoji-in-ui, no-generic-fonts, and no-default-tailwind-colors. Run it with npx eslint . --config eslint.config.korro.js, and use --fix for auto-fixable rules.

Does korrodesign require an OpenRouter API key to work?▼

No. The Taste Guardian rules run entirely within Claude with zero dependencies, and the ESLint plugin and quality checker are standalone Node scripts. The OpenRouter key only enables optional automated generation via generate.js using GLM 5.2 and Kimi K2.7.

How is this different from AI website builders like v0 or Bolt?▼

Those tools only generate code, while this skill enforces quality through two layers: design rules applied during generation and an ESLint audit after generation. It catches objective violations like missing button semantics rather than judging aesthetics subjectively.

Can I add custom rules to the korro-design ESLint plugin?▼

Yes. Copy eslint-plugin-korro-design.js into your project and add rules following the standard ESLint rule format. The plugin exports recommended and strict configs you can extend or override per rule.

Why does the skill ban h-screen and pure black in generated code?▼

h-screen breaks layouts on mobile Safari due to viewport height behavior, so min-h-[100dvh] is required instead. Pure black (#000) is visually harsh, so off-black values like zinc-950 or #0a0a0a are enforced by the no-pure-black rule.

Related Skills

Explore More Design & Creative Skills→
AbuBakar125-coAbuBakar125-co

higgsfield-generate

Generate images, videos, 3D assets, and audio via the Higgsfield CLI.

Community
Advanced
joaoguirunasjoaoguirunas
3

sites-deployment

Deploy Next.js sites to Vercel, Netlify, and Cloudflare Pages with CI/CD pipelines.

Community
Basic
asmortongptasmortongpt

visual-testing

Automate Playwright visual regression, accessibility, and performance checks across browsers.

Community
Advanced
TimothyNguyen04TimothyNguyen04

prototype-feedback

Analyze prototypes against PRDs, design systems, and user research.

Community
Advanced