Skip to content
Get packs

Orange Clean Paper SaaS

Styles web interfaces in a warm paper-toned SaaS look with orange accents and soft product visuals

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, the agent follows a set design direction for building web pages and product screens: warm cream and parchment backgrounds instead of stark white, orange used sparingly for buttons, step markers and highlights, rounded cards with soft shadows, and a split layout pairing a form with an illustrated product panel. It also gives guidance on subtle motion such as gentle floating elements and text reveals. The skill is design guidance only; the files are a style description plus a demo page and prompt, not a software library.

Great for

  • Designers or front-end developers who want a warm, premium onboarding or SaaS landing page look
  • Teams prototyping a product sign-up flow that should feel welcoming rather than cold
  • People who want a consistent visual direction the agent can apply across pages

Skip it if

  • Projects that need a cold, dense enterprise dashboard, since the skill explicitly steers away from that style
  • Brands with an existing design system that must be followed exactly, because this skill would conflict with it
  • Accessibility-critical work without manual checks, since the guidance mentions contrast but does not verify it

Try asking

  • “Build a sign-up onboarding page in the orange clean paper SaaS style with a form on the left and a product illustration on the right”
  • “Redesign our pricing card component using warm neutrals and orange primary buttons”
  • “Create a settings page with paper-toned inputs and soft orange focus rings”
Step-by-step guide: how to use Orange Clean Paper SaaSInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    orange-clean-paper-saas.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip orange-clean-paper-saas.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip orange-clean-paper-saas.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the page type and product (for example onboarding, pricing, dashboard) so the agent can pick the right split-panel or card pattern
  • Open demo/index.html to see the intended look before asking for variations
  • Ask the agent to check text contrast against the warm backgrounds, since the skill asks for readability but does not test it

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.