🎨
FrontendTypeScript

Frontend Design

by Qiao-920

Frontend Design is a Frontend skill for Claude Code, published by Qiao-920 in claude-desktop-cn.

259 stars35 forkson Qiao-920/claude-desktop-cnAdded 2026/09/02+2% in starsRepository updated 2026/06/03
View source on GitHubDownload repo ZIP
ai-assistantchineseclaudeclaude-codeclaude-desktopcode-workspacedesktop-appelectronwindows
Install in seconds
Install Frontend Design
Copy Frontend Design into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/Qiao-920/claude-desktop-cn/tree/main/electron/skills/frontend-design ~/.claude/skills/frontend-design

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/Qiao-920/claude-desktop-cn.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
electron/skills/frontend-design/SKILL.md in Qiao-920/claude-desktop-cn
Installs to
~/.claude/skills/frontend-design
Collection
One of 6 skills cataloged from this repository
Category
Frontend — 600 skills

What Frontend Design does

Frontend Design guides HTML, CSS, and JavaScript for polished web UIs and interactive projects. Use it when building websites, web apps, browser games, or single-file frontend demos.

Frontend Design is cataloged under Frontend on DirSkills. Frontend Design comes from a repository tagged ai-assistant, chinese, claude, claude-code and claude-desktop.

Documentation

README

Frontend Design: Build Polished Web UIs

You are creating frontend code (HTML, CSS, JavaScript). Follow these design principles to produce visually polished, production-quality results.

Design Principles

Layout & Spacing

  • Use consistent spacing scales (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px)
  • Add generous whitespace — don't crowd elements
  • Use CSS Grid or Flexbox for layout, never tables for layout
  • Ensure content has a max-width (960-1200px) with auto margins for readability

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Frontend Design

  • What else does Qiao-920 publish alongside Frontend Design?

    Frontend Design is one of 6 skills that DirSkills catalogs from Qiao-920/claude-desktop-cn, the repository it ships in. Its siblings there include Code Review, Create Project and Doc Writer. Each one is a separate skill with its own page in this directory, installs the same way Frontend Design does, and is maintained by Qiao-920 in that same repository. The rest of the collection is listed on the Qiao-920/claude-desktop-cn page.

  • How does Frontend Design compare to other Frontend skills?

    Frontend Design ranks #547 by stars among the 600 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Frontend Design against them. Open each page to compare what they document and how they install.

More from Qiao-920/claude-desktop-cn

Frontend Design is one of 6 skills cataloged on DirSkills from Qiao-920/claude-desktop-cn.

See all 6 skills →
🔍
1h ago

Code Review

Code Review thoroughly checks code or recent changes for bugs, security issues, performance problems, and maintainability concerns. Use it when reviewing implementations or auditing code quality.
Quality
25935
🧱
1h ago

Create Project

Create Project scaffolds a complete, runnable project from zero with a simple structure and the right entry files. Use it when starting a new app, game, tool, script, or API.
DevOps
25935
📝
1h ago

Doc Writer

Doc Writer generates README files, API docs, and user guides for code and projects. Use it when documenting code, explaining how a module works, or writing instructions for end users or developers.
Writing
25935
🛠️
1h ago

Skill Creator

Skill Creator helps you create new skills and refine existing ones for Claude. Use it when you want to define a skill’s behavior, trigger conditions, or instructions.
AI Engineering
25935
✅
1h ago

Verify

Verify checks that a code change works as expected by running the app. Use it when you need to confirm behavior after edits or catch regressions quickly.
Quality
25935

More Frontend skills

Frontend Design is one of 600 Frontend skills cataloged on DirSkills, ranked #547 by stars among them.

Browse all Frontend skills →
🅰️
3w ago

Angular Developer

Angular Developer generates Angular code and provides architectural guidance for Angular projects. Use it for creating projects, components, or services, or for best practices on reactivity, forms, DI, routing, SSR, accessibility, animations, styling, testing, and CLI tooling.
Frontend
239.8K36.4K
🏗️
3w ago

Android Clean Architecture

Android Clean Architecture provides patterns for structuring Android and Kotlin Multiplatform projects, covering module boundaries, UseCases, Repositories, and data layer with Room, SQLDelight, and Ktor. Use it when setting up layered architecture in Android or KMP projects.
Frontend
239.8K36.4K
♿
3w ago

Accessibility

Accessibility helps design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards for keyboard, contrast, and screen-reader support. Use it when building or auditing UI that must meet WCAG 2.2 Level AA or reviewing changes for accessibility.
Frontend
239.8K36.4K