Skip to main content
affpapa.org
RU EN
skill CX Codex

awesome-design-md-jp — Claude Code skill: what it does & setup

Provides Japanese UI specifications in DESIGN.md format for AI agents. It sets up CJK typography, font fallback chains, and punctuation line-break rules.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a claude-code
Open on GitHub

What awesome-design-md-jp does

AI agents read DESIGN.md for UI guidance. This skill extends the Google Stitch specification format specifically for Japanese websites. It configures CJK font fallback stacks, expands body line-height to values between 1.5 and 2.0, and sets letter-spacing between 0.04em and 0.1em. It also activates OpenType attributes palt and kern for proportional glyph spacing.

The package supplies 24 reference files based on services like MUJI, SmartHR, Mercari, and LINE. Each spec defines mixed Latin and Japanese typesetting alongside kinsoku shori line-breaking rules using line-break: strict. Without these rules in DESIGN.md, coding agents fall back to Western text styling, creating cramped Japanese paragraphs with orphaned punctuation marks.

What it helps with

  • configure kinsoku shori line-break rules for CJK punctuation
  • build mixed typography font stacks for Japanese and Latin text
  • generate a DESIGN.md spec matching MUJI or SmartHR styles
  • adjust line-height and letter-spacing for Japanese web layouts

Example prompts for the agent

  • Create a DESIGN.md file for a Japanese web app with kinsoku shori rules
  • Generate a Japanese UI design spec modeled after the MUJI style
  • Add Japanese font stacks and OpenType palt settings to DESIGN.md

How to install awesome-design-md-jp

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a claude-code

2Manually: put the files in place

~/.claude/skills/awesome-design-md-jp/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/awesome-design-md-jp/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about awesome-design-md-jp

How do I install awesome-design-md-jp in Claude Code?

Run npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a claude-code. The skill file will be placed at ~/.claude/skills/awesome-design-md-jp/SKILL.md.

What does awesome-design-md-jp do?

It provides templates and 24 reference DESIGN.md files for Japanese web applications. AI coding agents read these files to apply correct CJK typography and layout rules.

What layout settings does the template include?

It specifies line-height from 1.5 to 2.0, letter-spacing up to 0.1em, strict punctuation line breaks, and OpenType palt and kern flags.

Similar skills

Everything for Design →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set186

open-multi-agent-orchestration A skill that teaches your agent to build AI agent teams on the open-multi-agent TypeScript framework: roles, models, task dependencies. CX Codex +1 710installs pretext-text-measurement Calculates multiline text dimensions and line breaking in JavaScript without touching DOM layout properties or triggering reflow. CX Codex +1 694installs claude-code-source-recovery Walks an agent through the recovered TypeScript source of Claude 2.1.88: commands, MCP wiring and the terminal UI. CX Codex +1 693installs omnivoice-tts A skill for OmniVoice: clone a voice from a sample, generate speech from a text description, or run batch synthesis from Python and CLI. CX Codex +1 680installs paper2code-arxiv-implementation Converts arXiv papers into working Python code anchored to equations and sections. It audits ambiguities and flags missing paper details before execution. CX Codex +1 635installs fieldtheory-cli-bookmarks Use Field Theory CLI through an agent to sync, search, and classify X/Twitter bookmarks. Handy when you want to query saved posts without leaving your coding workflow. CX Codex +1 627installs claude-code-source-study A 25-article breakdown of Claude's source: system prompt, tools, agents and permissions. Useful if you are building your own agent. CX Codex +1 616installs cabinet-ai-knowledge-base This skill sets up Cabinet, a self-hosted knowledge base and startup OS with markdown pages, agents that keep memory, cron jobs and embedded HTML apps. CX Codex +1 607installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor