# designing-pigment-frames

> Claude/Codex skill by [@gopigment](https://omgskills.com/library/gopigment/index.md) · 23 stars · Updated 2026-10-23

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

```sh
git clone https://github.com/gopigment/ai-plugins /tmp/ai-plugins && ln -s /tmp/ai-plugins/skills/designing-pigment-frames ~/.claude/skills/designing-pigment-frames
```

## From 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.

## Links

- HTML page: https://omgskills.com/library/gopigment/ai-plugins/skills/designing-pigment-frames/
- GitHub: https://github.com/gopigment/ai-plugins
- Author: [@gopigment](https://omgskills.com/library/gopigment/index.md)

## More from this repo

- [aggregating-view-data](https://omgskills.com/library/gopigment/ai-plugins/skills/aggregating-view-data/index.md) — Execution skill.
   - [@gopigment](https://omgskills.com/library/gopigment/index.md) · 23 stars
- [architecting-multi-application-solutions](https://omgskills.com/library/gopigment/ai-plugins/skills/architecting-multi-application-solutions/index.md) — Planning skill.
   - [@gopigment](https://omgskills.com/library/gopigment/index.md) · 23 stars
- [auditing-a-pigment-application](https://omgskills.com/library/gopigment/ai-plugins/skills/auditing-a-pigment-application/index.md) — Execution skill.
   - [@gopigment](https://omgskills.com/library/gopigment/index.md) · 23 stars