designing-pigment-frames
Apply Pigment's visual design language to a new or existing Frame - use when the Frame should look Pigment-like: on-brand, native, or less generic. Do not use it when the user gives their own design requirements (a brand, a palette, screenshots, or a look to match). This skill contains the Pigment design system, foundations, patterns, styles, typography and color schemes.
Install
With your agent
Install OMGSkills skill "gopigment/ai-plugins:skills/designing-pigment-frames" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/gopigment/ai-plugins /tmp/ai-plugins && ln -s /tmp/ai-plugins/skills/designing-pigment-frames ~/.claude/skills/designing-pigment-framesFrom README
Styling Pigment Frames Give a Frame, new or existing, the visual language of the Pigment platform. You tend to converge toward generic, "on distribution" output, which users find off-putting. The reference files here exist so that you do not have to invent anything. When to Use Use this skill when the Pigment design is needed: the user asks for a Frame that looks native to Pigment, or gives no other design requirements. Do not use it when the user gives their own brand, palette, screenshots or a look to match. Follow the user's design instead. Always start with the base stylesheet: the contents of references/styles/stylesheet.md in the styles section. It gives the Frame Pigment's color, spacing, radius and motion tokens as CSS variables, so the Frame does not look generic. Type styles and every component's own CSS come from their own recipe file, in the design passes.