Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Interface art direction before code v1.0.0

Use this resource to define a distinctive visual direction before building a web interface

New

  • 379 downloads
  • 168 likes
  • 124 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install bold-ui-design-direction

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

Before writing any code, the agent writes a sheet: purpose, a style chosen from eleven, a palette of three to five colors, fonts and layout strategy. It then builds the prototype with Tailwind and an icon library, and audits itself on colors, fonts, icons and layout. This avoids generic pages with purple gradients and centered cards.

Mostly picked by

Updated November 2, 2026

Design specification sheet listing purpose, style, palette, fonts and layout above an asymmetric page.

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: mandatory design sheet, style options, typography, color, motion and composition principles
  • Code examples to avoid and to prefer, plus a self-audit list before delivery
  • checklist.md: an activation checklist to read before generating the interface

Good fit for

  • Starting a home page or prototype with a strong style
  • Getting away from the generic look of code-agent output
  • Documenting a visual direction before integration work

Not for

  • Implementing an already approved mockup
  • A project with a strict style guide and no room to create
  • Server-side development or databases

Tags

  • design
  • art direction
  • prototype
  • typography
  • palette

About

You say

"First write the design sheet for my online bookshop's home page in an editorial style, then build the prototype."

Design specification sheet listing purpose, style, palette, fonts and layout above an asymmetric page.

Skill published by tencentcloudbase under the MIT license.

Show more

Prerequisites

You bring
A description of the product and its audience and Your brand guidelines, if any

How to use it

  1. Copy the skill folder into your agent's skills folder.
  2. Describe the product, the audience and the tone you want.
  3. Approve the design sheet, then let the agent build and audit the prototype.

Content preview

Files

  • checklist.md0.8 KB
  • LICENSE.md1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • SKILL.md16 KB

Origin and licence

Modified by PalateKit

Author
tencentcloudbase
Source
github.com/tencentcloudbase/skills/tree/930c3e4f75d3f3ae5ffd49fbd7ec216f344b6b66/skills/ui-design
Licence
MIT

Notice

Version modifiée de « ui-design » (tencentcloudbase, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Does the skill depend on other skills?

It points to neighboring CloudBase skills (web development, mini programs) for implementation. They are not needed for the design part.

Can we keep our brand guidelines?

Yes. Brand colors and fonts take priority, as long as the override is stated explicitly in the design sheet.