How to use the Light Paper Technical Design agent skill

What an agent skill is and what this one changes

An agent skill is a folder containing a SKILL.md file. The file holds instructions the agent reads when your request matches the skill's description. This skill is about visual style: when the agent designs or builds an interface, it follows a defined look instead of defaulting to a generic white dashboard.

The source describes the output as light, warm, tactile and technical. Surfaces are parchment or soft paper tones rather than stark white, the lighter interior sits inside a darker shell, and subtle diagonal texture and measured guides add structure. Motion is kept calm, using masked headline reveals, fade-up sections and subtle activity indicators.

• Warm neutral paper surfaces instead of pure white
• Dark outer page with a large light rounded container
• Thin borders, inset rules, L-brackets and small corner details
• Low-contrast diagonal texture on large paper regions
• One accent color for active states, labels and focal details
• Mono text option for timestamps, captions and metadata

Install the skill from the ZIP download

Download the ZIP for light-mode-paper-technical from the skill's page in this directory, then unzip it. The skill folder contains SKILL.md, plus a demo folder with index.html, PROMPT.md and source.json.

For a personal install, place the unzipped skill folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder instead. Restart or start a new session if the agent does not pick it up right away.

If you use the Claude apps rather than a local setup, you can upload the skill under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/light-mode-paper-technical/
• Project only: your-project/.claude/skills/light-mode-paper-technical/
• Claude apps: Settings → Capabilities → Skills → upload

Trigger the skill with natural requests

You do not need special syntax. Describe the interface you want and say that you want the warm paper technical look. The demo prompts in the package use the form $light-mode-paper-technical followed by your request, which is a direct way to name the skill.

Be specific about the product and the content. The skill controls style, so your request should cover the page purpose, sections and any content you want shown.

• Make a landing page for a note-taking app in the light paper technical style.
• Use the light-mode-paper-technical skill to build a dashboard with a sidebar, session cards and a transcript pane.
• Design a product mockup with a dark outer frame, warm off-white panels and one accent color for the call-to-action.

Use the demo files as a reference

The package includes demo/index.html as a visual and interaction reference, and demo/PROMPT.md with two prompts. The minimal prompt asks for a responsive standalone HTML design with the same visual confidence and hierarchy as the reference. The longer prompt asks the agent to recreate a named demo page and treat demo/index.html as the reference rather than a loose mood board.

Use the minimal prompt when you want the style applied to new work. Use the full recreation prompt when you want the agent to match a specific layout closely.

• demo/index.html: the visual and interaction reference
• demo/PROMPT.md: ready-to-use prompts
• demo/source.json: additional demo data included in the package

Tune the look with the built-in knobs

The SKILL.md file lists tuning options you can ask for in your request. You can request warmer parchment or cooler stone paper, stronger or lighter framing with more or fewer brackets and rules, more or less roundness on the outer shell, a stronger or quieter accent, and more or less diagonal texture.

The file also lists patterns to avoid, including flat white SaaS layouts, heavy vintage distressing, cold blue-gray systems, and excessive accent use.

• Paper warmth: cooler stone to warmer parchment
• Framing strength: fewer or more brackets and rules
• Accent intensity: keep it crisp and limited
• Texture amount: subtle, not vintage or noisy

Check what this skill does not do

The skill is aesthetic guidance. It does not test readability, contrast or accessibility, so you should check those yourself before shipping. It also pushes its own visual direction, which may conflict with an existing brand or design system.

The skill needs nothing listed beyond the agent, runs no scripts and uses no network access, according to the listing.

• Verify text contrast and accessibility yourself
• Avoid it for projects that must follow an existing brand system
• Licence: MIT