How to use the Orange Clean Paper SaaS agent skill

What is an agent skill and what does this one do?

An agent skill is a folder containing a SKILL.md file and supporting files. When installed, the agent reads these instructions and follows them when a request matches the skill's purpose. This skill is design guidance only: it is a style description plus a demo page and a prompt, not a software library.

The skill steers the agent toward a specific look: warm off-white, cream, parchment and pale stone surfaces instead of stark white; orange used as the primary signal colour for steps, buttons, active states, icons and focused inputs; rounded cards with soft shadows; and a split onboarding layout with a form on one side and a visual product demonstration on the other. It also describes subtle motion such as masked text reveals and gentle floating elements.

• Warm paper backgrounds layered inside a softer radial page background
• Orange primary buttons paired with quiet secondary actions
• Rounded white or cream cards with light gradient borders and soft orange-tinted shadows
• Floating UI chips, balance cards or product visuals used for depth
• Clean sans-serif typography with light-to-regular body weights

Install the orange-clean-paper-saas skill

Download the ZIP from the skill's page in this directory and unzip it. There are two common places to put the skill folder. For a personal setup that applies to all your projects, place it in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.

If you use the Claude apps instead of a local setup, you can upload the skill there. Open Settings, go to Capabilities, then Skills, and upload the skill from there.

• Personal install: unzip into ~/.claude/skills/
• Project install: unzip into the project's .claude/skills/ folder
• Claude apps: Settings → Capabilities → Skills, then upload the skill

Know what the skill includes

The download contains four files. SKILL.md holds the design direction, including the visual target, implementation guidance, recommended patterns, tuning knobs and a list of things to avoid. The demo folder holds a reference page, a prompt file and a source file that you can point the agent to.

• SKILL.md: the design rules the agent follows
• demo/index.html: a demo page to use as a visual and interaction reference
• demo/PROMPT.md: demo prompts you can copy and adapt
• demo/source.json: supporting source data for the demo

Trigger the skill with natural requests

Name the skill in your request so the agent knows to use it. The demo prompts in the package use the form $orange-clean-paper-saas at the start of the request. Describe the page you want and what it must communicate.

Be specific about the product and the page type. The skill is aimed at onboarding flows, sign-up screens and SaaS landing pages, so say which of those you are building.

• Use $orange-clean-paper-saas to create a responsive standalone HTML sign-up page for a project tool, with a form on the left and an illustrated product panel on the right.
• Use $orange-clean-paper-saas to build a pricing section that compares three plans, with orange primary buttons and quiet secondary links.
• Use $orange-clean-paper-saas to recreate demo/index.html as a complete responsive HTML document, keeping its hierarchy and motion.

Get better results from the agent

Tell the agent how warm or how energetic you want the page to feel. The skill exposes tuning controls for paper warmth, orange intensity, radius and softness, visual richness and contrast. Naming the level you want saves a round of revisions.

Point the agent at demo/index.html when you want the closest match to the reference. The skill's own rules warn against heavy paper distressing, noisy 3D objects and flat white forms, so you can mention those too if the first draft drifts.

• Set paper warmth: cooler cream or richer parchment
• Set orange energy: vivid enough to feel active, restrained enough to stay calm
• Ask for fewer or more floating product elements depending on how illustrated the page should be
• Ask the agent to check text contrast on warm backgrounds before finishing

Safety, requirements and limits

The skill lists no requirements. It does not run scripts and does not use the network, according to its package description. It is a set of written instructions and sample files.

The skill is not suitable for every project. It explicitly steers away from cold, dense enterprise dashboards. It will conflict with a brand design system that must be followed exactly. The guidance mentions contrast but does not verify it, so accessibility-critical work needs manual checks against your own standards.

• No listed requirements
• Runs scripts: no
• Uses network: no
• Contrast is named as a goal but is not automatically verified
• Review generated pages yourself before shipping