Nucifera — Design skill for Claude Code

nucifera

A design skill for Claude Code. It makes Claude design interfaces in one precise style, in the line of Linear, Raycast and Reflect: a monochrome dark theme and a light "Dusk" theme with a violet accent, and it checks the rendered screens before handing them over.

Named after *Cocos nucifera*, the coconut palm: a dark shell with a light inside, like the two themes. Status: 0.3.0, early. See "What it does not promise".

What it does

• Starts with a scene, not a template. Before any code Claude writes to .design/DESIGN.md: who looks at the screen and where, the direction, the accent, one signature element taken from the subject's own world (a paint-thickness map for a car inspection, an appointment book for a barbershop), what must be visible on the first screen, and a motion map: every change of state with its recipe.
• Builds from a closed set of tokens and components. tokens.css defines both themes by role (surfaces, lines, text, accent, main action); kit.css has about fifteen components (rows, hero card, stat, chips, fields, key-value, states). No raw colours in screens.
• Moves with intent. A calm house tempo in the tokens and ready recipes in kit.css and motion.js: presses that answer, menus that grow from their trigger, a sliding selection, sheets you can drag away, rolling prices, toasts, screen changes with direction, a waiting ladder that never flickers. Frequent actions stay still, prices and results never wait for an animation, and reduced motion keeps the meaning.
• Reads without effort. Body text 16px, secondary text 14px in one grey, data as plain label-value lists instead of boxes and grids, a status shown only when it is the exception, drawings that need no legend.
• Names the AI tells and what to do instead. Fifteen rules in the core and a dated list of 35 in the references: no coloured glows, no gradient buttons, no decorative dots, no small grey text in several shades, no data cut into boxes, no eyebr