Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .claude-plugin/marketplace.json
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,15 @@
"./skills/lean-jev-usage",
"./skills/ask-jev"
]
},
{
"name": "design",
"source": "./plugins/design",
"description": "Art direction against the generic AI look for landing pages, UI mockups, Figma frames and marketing copy.",
"skills": [
"./skills/design-usage",
"./skills/deslopify"
]
}
]
}
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,12 @@ See [Discover and install plugins](https://code.claude.com/docs/en/discover-plug

`flutter-forms` and `flutter-patrol` install straight from the repositories of the packages they cover, so they stay in step with each release. Each plugin's `README.md` covers its setup.

### Design

| Plugin | Covers |
| ------ | ------ |
| [`design`](plugins/design/) | `/design:deslopify` gives art direction against the generic AI look for landing pages, UI mockups, Figma frames and marketing copy |

### Judgment and review

| Plugin | Covers | Setup |
Expand Down
20 changes: 20 additions & 0 deletions plugins/design/.claude-plugin/plugin.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"$schema": "https://json.schemastore.org/claude-code-plugin-manifest.json",
"name": "design",
"displayName": "Design",
"description": "Art direction against the generic AI look for landing pages, UI mockups, Figma frames and marketing copy.",
"version": "0.1.0",
"author": {
"name": "LeanCode"
},
"homepage": "https://github.com/leancodepl/ai-plugins",
"repository": "https://github.com/leancodepl/ai-plugins",
"keywords": [
"design",
"ui",
"figma",
"copywriting",
"landing-page"
],
"skills": "./skills/"
}
21 changes: 21 additions & 0 deletions plugins/design/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# design

Art direction plugin for Claude Code, for visual and copy work that should not look AI-generated.

Contains:

- `skills/deslopify/SKILL.md`: banned visual patterns, composition and grid, typography, colour, copy rules and a review checklist
- `skills/design-usage/SKILL.md`: entry point for this plugin

## Example usage

- `/design:deslopify`: direct or review a landing section, artifact, Figma frame or UI mockup
- `/design-usage`: get a short explanation of what this plugin does and which asset to use next

## What this plugin is NOT about

Implementing Flutter UI from a design system lives in [`flutter-ui`](../flutter-ui/).

## Related plugins

- [`flutter-ui`](../flutter-ui/): Figma-driven Flutter UI implementation and design-system usage
37 changes: 37 additions & 0 deletions plugins/design/skills/design-usage/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
name: design-usage
description: Explain what the `design` plugin does and how to use it. Use when the user invokes `/design-usage`, asks what this plugin covers, or wants help choosing how to review or direct visual and copy work.
---

# Design Usage

## How to respond

- If the user invoked this skill without a concrete task, start by explaining what this plugin does and when it should be used.
- If the user already gave a concrete design or copy task, briefly explain why this plugin fits, then load `deslopify` and do the work.
- Do not reply with filler like "skill loaded", "ready for the task", or "what would you like to do?" before explaining the plugin.

## What this plugin does

- Gives art direction against the generic AI look: glow gradients, radius on autopilot, icon-in-circle, centred-everything, filled card rows, stock typefaces, generated-looking imagery.
- Keeps a page consistent: one component set, one badge style, the brand palette, one type scale, no near-duplicate colours or text styles.
- Covers responsive layout, accessibility, interface states and realistic content.
- Lists the words and sentence shapes, in English and Polish, that make UI and marketing copy read as generated.
- Works with any brand: the universal rules always apply, and a default Swiss/editorial direction is used only when the project has none.
- Ends with a review checklist to run on desktop and mobile screenshots before shipping.

## How to use it

- Load it before designing or writing a section: a landing page, an artifact, a Figma frame, a UI mockup.
- Ask it to review something that "looks AI-generated", generic or templated, and fix it.
- Ask it to rewrite hero, FAQ or testimonial copy plainly.

## Example requests

- "Deslopify this hero section."
- "This pricing page looks too SaaS. What exactly is wrong with it?"
- "Rewrite these FAQ answers so they don't read like AI."

## Reach for these assets

- `deslopify` (`/design:deslopify`) - banned patterns, composition, type, colour and copy rules, and the pre-ship checklist.
Loading
Loading