mirror of
https://github.com/anthropics/claude-code.git
synced 2026-06-19 14:03:32 +00:00
Compare commits
4 Commits
v2.1.179
...
fix-lock-c
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6f73e049c1 | ||
|
|
423563cfe3 | ||
|
|
0047022a46 | ||
|
|
843959fad9 |
@@ -72,7 +72,7 @@
|
||||
{
|
||||
"name": "frontend-design",
|
||||
"description": "Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"author": {
|
||||
"name": "Prithvi Rajasekaran & Alexander Bricken",
|
||||
"email": "prithvi@anthropic.com"
|
||||
|
||||
63
.github/workflows/lock-closed-issues.yml
vendored
63
.github/workflows/lock-closed-issues.yml
vendored
@@ -22,71 +22,56 @@ jobs:
|
||||
script: |
|
||||
const sevenDaysAgo = new Date();
|
||||
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
|
||||
const cutoff = sevenDaysAgo.toISOString().split('T')[0];
|
||||
|
||||
const lockComment = `This issue has been automatically locked since it was closed and has not had any activity for 7 days. If you're experiencing a similar issue, please file a new issue and reference this one if it's relevant.`;
|
||||
|
||||
let page = 1;
|
||||
let hasMore = true;
|
||||
const query = `repo:${context.repo.owner}/${context.repo.repo} is:issue is:closed is:unlocked updated:<${cutoff}`;
|
||||
console.log(`Search query: ${query}`);
|
||||
|
||||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||||
const MAX_PER_RUN = 250;
|
||||
const processed = new Set();
|
||||
let totalLocked = 0;
|
||||
|
||||
while (hasMore) {
|
||||
// Get closed issues (pagination)
|
||||
const { data: issues } = await github.rest.issues.listForRepo({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
state: 'closed',
|
||||
while (totalLocked < MAX_PER_RUN) {
|
||||
const { data } = await github.rest.search.issuesAndPullRequests({
|
||||
q: query,
|
||||
sort: 'updated',
|
||||
direction: 'asc',
|
||||
order: 'asc',
|
||||
per_page: 100,
|
||||
page: page
|
||||
});
|
||||
|
||||
if (issues.length === 0) {
|
||||
hasMore = false;
|
||||
break;
|
||||
|
||||
if (totalLocked === 0) {
|
||||
console.log(`Total candidates: ${data.total_count}`);
|
||||
}
|
||||
|
||||
for (const issue of issues) {
|
||||
// Skip if already locked
|
||||
if (issue.locked) continue;
|
||||
|
||||
// Skip pull requests
|
||||
if (issue.pull_request) continue;
|
||||
|
||||
// Check if updated more than 7 days ago
|
||||
const updatedAt = new Date(issue.updated_at);
|
||||
if (updatedAt > sevenDaysAgo) {
|
||||
// Since issues are sorted by updated_at ascending,
|
||||
// once we hit a recent issue, all remaining will be recent too
|
||||
hasMore = false;
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
const fresh = data.items.filter((i) => !processed.has(i.number));
|
||||
if (fresh.length === 0) break;
|
||||
|
||||
for (const issue of fresh) {
|
||||
if (totalLocked >= MAX_PER_RUN) break;
|
||||
processed.add(issue.number);
|
||||
try {
|
||||
// Add comment before locking
|
||||
await github.rest.issues.createComment({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: issue.number,
|
||||
body: lockComment
|
||||
body: lockComment,
|
||||
});
|
||||
|
||||
// Lock the issue
|
||||
await github.rest.issues.lock({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: issue.number,
|
||||
lock_reason: 'resolved'
|
||||
lock_reason: 'resolved',
|
||||
});
|
||||
|
||||
totalLocked++;
|
||||
console.log(`Locked issue #${issue.number}: ${issue.title}`);
|
||||
await sleep(1000);
|
||||
} catch (error) {
|
||||
console.error(`Failed to lock issue #${issue.number}: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
page++;
|
||||
}
|
||||
|
||||
console.log(`Total issues locked: ${totalLocked}`);
|
||||
|
||||
43
CHANGELOG.md
43
CHANGELOG.md
@@ -1,5 +1,47 @@
|
||||
# Changelog
|
||||
|
||||
## 2.1.181
|
||||
|
||||
- Added `/config key=value` syntax to set any setting from the prompt (e.g. `/config thinking=false`) — works in interactive, `-p`, and Remote Control
|
||||
- Added `sandbox.allowAppleEvents` opt-in setting that lets sandboxed commands send Apple Events on macOS
|
||||
- Added `CLAUDE_CLIENT_PRESENCE_FILE` environment variable: point it at a marker file to suppress mobile push notifications while you're at the machine
|
||||
- Upgraded the bundled Bun runtime to 1.4
|
||||
- Improved streaming of long paragraphs: text now appears line-by-line instead of waiting for the first line break
|
||||
- Improved auto-retry: API connection drops mid-thinking now automatically retry instead of showing "Connection closed while thinking"
|
||||
- Improved the subagent panel: idle subagents auto-hide after 30s, the list caps at 5 rows with scroll hints, and keyboard hints now show in the footer
|
||||
- Improved the MCP OAuth browser page to match Claude Code's visual style and auto-close on success
|
||||
- Changed fullscreen mode URL opening to require Cmd+click (macOS) / Ctrl+click, matching native terminal behavior
|
||||
- Changed the `Improved N memories` line to no longer list individual files outside verbose mode
|
||||
- Fixed prompt caching not reading on custom `ANTHROPIC_BASE_URL` and on Foundry due to a per-request attestation token changing every turn
|
||||
- Fixed Write/Edit producing 0-byte or truncated files on network drives and cloud-synced folders
|
||||
- Fixed `open`, `osascript`, and browser-based auth flows failing with error -600 on macOS by adding the Apple Events entitlement
|
||||
- Fixed a startup regression (~120ms per launch in fresh environments, introduced in 2.1.169): the first prompt no longer waits for the managed-settings fetch when no MCP servers are configured
|
||||
- Fixed startup blocking with a blank terminal for up to 15 seconds when the account settings fetch is slow on a degraded network
|
||||
- Fixed startup crash (`TypeError: Cannot read properties of null`) when `.claude.json` contains corrupted null project entries
|
||||
- Fixed macOS TUI freezing at session start (Ctrl+C unresponsive) when Spotlight is busy reindexing
|
||||
- Fixed long-running idle sessions losing their history when another Claude Code process ran the 30-day transcript cleanup
|
||||
- Fixed foreground subagents spawning unbounded nested chains; they now respect the same 5-level depth limit as background subagents
|
||||
- Fixed `/recap` and conversation forks using the previous model immediately after a model switch
|
||||
- Fixed subagent "Thinking" duration showing the parent agent's elapsed time instead of the subagent's own
|
||||
- Fixed subagents blocked on a nested agent showing a ticking elapsed time instead of "waiting" in the agent panel
|
||||
- Fixed the API retry indicator ("Retrying in 0s · attempt N/10") staying on screen after the retry succeeded
|
||||
- Fixed AWS `awsCredentialExport` credentials with a short remaining lifetime causing credential refreshes every minute, and now accepts the JSON shape from `aws configure export-credentials`
|
||||
- Fixed `claude mcp get`/`list` showing `✓ Connected` when tools/list fails; they now show `! Connected · tools fetch failed` with the error detail
|
||||
- Fixed `/remote-control` leaving a stale "connecting…" line; it now confirms in the transcript once connected
|
||||
- Fixed ExitWorktree refusing to remove a clean worktree with "Could not verify worktree state" when bare `git` cannot be resolved on Windows
|
||||
- Fixed settings changes (such as `/effort` or `/model`) failing with ENOENT when `~/.claude/settings.json` is a relative symlink under a symlinked `~/.claude`
|
||||
- Fixed IDE selection line numbers in context reminders being off by one (IntelliJ and VS Code)
|
||||
- Fixed Ctrl+C in fullscreen after a native terminal selection (modifier+drag) overwriting the clipboard with the app's prior selection
|
||||
- Fixed Ctrl+V showing "No image found in clipboard" instead of pasting when the clipboard contains text
|
||||
- Fixed agent creation failing with "EEXIST: file already exists" when the agents directory already exists (Windows/OneDrive)
|
||||
- Fixed AskUserQuestion preview content being cut off at the dialog edge instead of word-wrapping
|
||||
- Fixed AskUserQuestion multi-select questions silently dropping a typed "Other" free-text answer when submitting
|
||||
- Fixed `/stats` "Most active day" and daily token chart dates showing one day early in UTC-negative timezones
|
||||
- Fixed `/copy` and copy-on-select on Linux not detecting a clipboard utility installed after Claude Code started
|
||||
- Fixed tab-indented code rendering with incorrect indentation in the Write (create-file) preview
|
||||
- Fixed user prompts queued mid-turn not showing a full-width background highlight in the transcript
|
||||
- Fixed the activity spinner's pulse dwelling on the wrong glyph size in Ghostty
|
||||
|
||||
## 2.1.179
|
||||
|
||||
- Fixed mid-stream connection drops: partial responses are now preserved instead of showing a raw error, and the spinner no longer gets stuck at "running tool"
|
||||
@@ -31,6 +73,7 @@
|
||||
- Fixed compaction not honoring `--fallback-model`: compaction now falls back to the configured fallback model chain on overload or model-availability errors
|
||||
- Fixed model requests continuing to fail with auth errors after credentials were refreshed outside the session, due to a stale cached request configuration
|
||||
- Fixed background sessions created with `/bg` or `←←` after a turn finished showing "Working" forever in the agents list
|
||||
- Fixed Linux sandbox failing to start when `.claude/skills` or `.claude/hooks` is a symlink
|
||||
- Fixed `CLAUDE_CODE_PLUGIN_KEEP_MARKETPLACE_ON_FAILURE=1` preventing fresh marketplace installs from cloning
|
||||
- Fixed MCP server-level specs (`mcp__server`, `mcp__server__*`, `mcp__*`) in subagent `disallowedTools` being silently ignored
|
||||
- Fixed vim mode undo: `u` now steps through NORMAL/VISUAL-mode commands one at a time instead of merging commands in quick succession into a single undo step
|
||||
|
||||
87
feed.xml
87
feed.xml
@@ -6,7 +6,52 @@
|
||||
<author><name>Anthropic</name></author>
|
||||
<link rel="alternate" type="text/html" href="https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md"/>
|
||||
<link rel="self" type="application/atom+xml" href="https://raw.githubusercontent.com/anthropics/claude-code/main/feed.xml"/>
|
||||
<updated>2026-06-16T20:22:06Z</updated>
|
||||
<updated>2026-06-17T22:07:34Z</updated>
|
||||
<entry>
|
||||
<id>https://github.com/anthropics/claude-code/releases/tag/v2.1.181</id>
|
||||
<title>Claude Code v2.1.181</title>
|
||||
<link rel="alternate" type="text/html" href="https://github.com/anthropics/claude-code/releases/tag/v2.1.181"/>
|
||||
<updated>2026-06-17T22:07:34Z</updated>
|
||||
<content type="html"><p>• Added /config key=value syntax to set any setting from the prompt (e.g. /config thinking=false) — works in interactive, -p, and Remote Control</p>
|
||||
<p>• Added sandbox.allowAppleEvents opt-in setting that lets sandboxed commands send Apple Events on macOS</p>
|
||||
<p>• Added CLAUDE_CLIENT_PRESENCE_FILE environment variable: point it at a marker file to suppress mobile push notifications while you're at the machine</p>
|
||||
<p>• Upgraded the bundled Bun runtime to 1.4</p>
|
||||
<p>• Improved streaming of long paragraphs: text now appears line-by-line instead of waiting for the first line break</p>
|
||||
<p>• Improved auto-retry: API connection drops mid-thinking now automatically retry instead of showing "Connection closed while thinking"</p>
|
||||
<p>• Improved the subagent panel: idle subagents auto-hide after 30s, the list caps at 5 rows with scroll hints, and keyboard hints now show in the footer</p>
|
||||
<p>• Improved the MCP OAuth browser page to match Claude Code's visual style and auto-close on success</p>
|
||||
<p>• Changed fullscreen mode URL opening to require Cmd+click (macOS) / Ctrl+click, matching native terminal behavior</p>
|
||||
<p>• Changed the Improved N memories line to no longer list individual files outside verbose mode</p>
|
||||
<p>• Fixed prompt caching not reading on custom ANTHROPIC_BASE_URL and on Foundry due to a per-request attestation token changing every turn</p>
|
||||
<p>• Fixed Write/Edit producing 0-byte or truncated files on network drives and cloud-synced folders</p>
|
||||
<p>• Fixed open, osascript, and browser-based auth flows failing with error -600 on macOS by adding the Apple Events entitlement</p>
|
||||
<p>• Fixed a startup regression (~120ms per launch in fresh environments, introduced in 2.1.169): the first prompt no longer waits for the managed-settings fetch when no MCP servers are configured</p>
|
||||
<p>• Fixed startup blocking with a blank terminal for up to 15 seconds when the account settings fetch is slow on a degraded network</p>
|
||||
<p>• Fixed startup crash (TypeError: Cannot read properties of null) when .claude.json contains corrupted null project entries</p>
|
||||
<p>• Fixed macOS TUI freezing at session start (Ctrl+C unresponsive) when Spotlight is busy reindexing</p>
|
||||
<p>• Fixed long-running idle sessions losing their history when another Claude Code process ran the 30-day transcript cleanup</p>
|
||||
<p>• Fixed foreground subagents spawning unbounded nested chains; they now respect the same 5-level depth limit as background subagents</p>
|
||||
<p>• Fixed /recap and conversation forks using the previous model immediately after a model switch</p>
|
||||
<p>• Fixed subagent "Thinking" duration showing the parent agent's elapsed time instead of the subagent's own</p>
|
||||
<p>• Fixed subagents blocked on a nested agent showing a ticking elapsed time instead of "waiting" in the agent panel</p>
|
||||
<p>• Fixed the API retry indicator ("Retrying in 0s · attempt N/10") staying on screen after the retry succeeded</p>
|
||||
<p>• Fixed AWS awsCredentialExport credentials with a short remaining lifetime causing credential refreshes every minute, and now accepts the JSON shape from aws configure export-credentials</p>
|
||||
<p>• Fixed claude mcp get/list showing ✓ Connected when tools/list fails; they now show ! Connected · tools fetch failed with the error detail</p>
|
||||
<p>• Fixed /remote-control leaving a stale "connecting…" line; it now confirms in the transcript once connected</p>
|
||||
<p>• Fixed ExitWorktree refusing to remove a clean worktree with "Could not verify worktree state" when bare git cannot be resolved on Windows</p>
|
||||
<p>• Fixed settings changes (such as /effort or /model) failing with ENOENT when ~/.claude/settings.json is a relative symlink under a symlinked ~/.claude</p>
|
||||
<p>• Fixed IDE selection line numbers in context reminders being off by one (IntelliJ and VS Code)</p>
|
||||
<p>• Fixed Ctrl+C in fullscreen after a native terminal selection (modifier+drag) overwriting the clipboard with the app's prior selection</p>
|
||||
<p>• Fixed Ctrl+V showing "No image found in clipboard" instead of pasting when the clipboard contains text</p>
|
||||
<p>• Fixed agent creation failing with "EEXIST: file already exists" when the agents directory already exists (Windows/OneDrive)</p>
|
||||
<p>• Fixed AskUserQuestion preview content being cut off at the dialog edge instead of word-wrapping</p>
|
||||
<p>• Fixed AskUserQuestion multi-select questions silently dropping a typed "Other" free-text answer when submitting</p>
|
||||
<p>• Fixed /stats "Most active day" and daily token chart dates showing one day early in UTC-negative timezones</p>
|
||||
<p>• Fixed /copy and copy-on-select on Linux not detecting a clipboard utility installed after Claude Code started</p>
|
||||
<p>• Fixed tab-indented code rendering with incorrect indentation in the Write (create-file) preview</p>
|
||||
<p>• Fixed user prompts queued mid-turn not showing a full-width background highlight in the transcript</p>
|
||||
<p>• Fixed the activity spinner's pulse dwelling on the wrong glyph size in Ghostty</p></content>
|
||||
</entry>
|
||||
<entry>
|
||||
<id>https://github.com/anthropics/claude-code/releases/tag/v2.1.179</id>
|
||||
<title>Claude Code v2.1.179</title>
|
||||
@@ -44,6 +89,7 @@
|
||||
<p>• Fixed compaction not honoring --fallback-model: compaction now falls back to the configured fallback model chain on overload or model-availability errors</p>
|
||||
<p>• Fixed model requests continuing to fail with auth errors after credentials were refreshed outside the session, due to a stale cached request configuration</p>
|
||||
<p>• Fixed background sessions created with /bg or ←← after a turn finished showing "Working" forever in the agents list</p>
|
||||
<p>• Fixed Linux sandbox failing to start when .claude/skills or .claude/hooks is a symlink</p>
|
||||
<p>• Fixed CLAUDE_CODE_PLUGIN_KEEP_MARKETPLACE_ON_FAILURE=1 preventing fresh marketplace installs from cloning</p>
|
||||
<p>• Fixed MCP server-level specs (mcp__server, mcp__server__*, mcp__*) in subagent disallowedTools being silently ignored</p>
|
||||
<p>• Fixed vim mode undo: u now steps through NORMAL/VISUAL-mode commands one at a time instead of merging commands in quick succession into a single undo step</p>
|
||||
@@ -378,43 +424,4 @@
|
||||
<updated>2026-05-30T02:42:09Z</updated>
|
||||
<content type="html"><p>• Auto mode is now available on Bedrock, Vertex, and Foundry for Opus 4.7 and Opus 4.8. Opt in by setting CLAUDE_CODE_ENABLE_AUTO_MODE=1</p></content>
|
||||
</entry>
|
||||
<entry>
|
||||
<id>https://github.com/anthropics/claude-code/releases/tag/v2.1.157</id>
|
||||
<title>Claude Code v2.1.157</title>
|
||||
<link rel="alternate" type="text/html" href="https://github.com/anthropics/claude-code/releases/tag/v2.1.157"/>
|
||||
<updated>2026-05-29T20:20:32Z</updated>
|
||||
<content type="html"><p>• Plugins in .claude/skills directories are now automatically loaded, no marketplace required</p>
|
||||
<p>• Added claude plugin init &lt;name&gt; to scaffold a new plugin in .claude/skills</p>
|
||||
<p>• Added autocomplete for /plugin arguments: subcommands, installed plugin names, and plugins from known marketplaces</p>
|
||||
<p>• claude agents: the agent field in settings.json is now honored for dispatched sessions, with --agent &lt;name&gt; to override it</p>
|
||||
<p>• EnterWorktree can now switch between Claude-managed worktrees mid-session</p>
|
||||
<p>• tool_decision telemetry events now include tool_parameters (bash commands, MCP/skill names) when OTEL_LOG_TOOL_DETAILS=1</p>
|
||||
<p>• Worktrees managed by Claude are now left unlocked when the agent finishes, so git worktree remove/prune can clean them up</p>
|
||||
<p>• Fixed unprocessable images (zero-byte, corrupt) attached via paste, MCP, or dialog crashing the request instead of becoming a text placeholder</p>
|
||||
<p>• Fixed sandbox network permission prompts appearing in auto and bypass-permissions mode when using the desktop app, IDE extensions, or SDK</p>
|
||||
<p>• Fixed claude agents completed sessions not retiring when an idle subagent was still parked or had leaked a backgrounded shell</p>
|
||||
<p>• Fixed claude agents pressing Esc not cancelling a slow "opening…", leaving the list unresponsive</p>
|
||||
<p>• Fixed background agent worktrees under .claude/worktrees/ being orphaned after the 30-day job retention sweep</p>
|
||||
<p>• Fixed background sessions re-attached after a sleep/wake not telling the model the correct date</p>
|
||||
<p>• Fixed copy-on-select in claude agents not reaching the system clipboard inside tmux with set-clipboard on (regression in 2.1.153)</p>
|
||||
<p>• Fixed --resume not reporting background subagents that were running when the previous Claude Code process exited</p>
|
||||
<p>• Fixed the --resume session picker leaving its contents on the terminal after exiting in fullscreen mode</p>
|
||||
<p>• Fixed --worktree and --worktree --tmux returning to the canonical repo root instead of the current linked worktree</p>
|
||||
<p>• Fixed the /model picker showing an incorrect "Newer version available" hint when the selected model is already the newest in its family; the pinned-model row now shows the model's description instead of its raw ID</p>
|
||||
<p>• Fixed literal markdown markers (backticks, asterisks) appearing in the in-progress message text in fullscreen mode</p>
|
||||
<p>• Fixed the terminal freezing after approving the managed-settings security dialog at startup</p>
|
||||
<p>• Fixed a rare duplicate line appearing in scrollback after the terminal UI redraws</p>
|
||||
<p>• Fixed right-click paste duplicating the clipboard in the VS Code, Cursor, and Windsurf integrated terminals</p>
|
||||
<p>• WSL: fixed image paste (alt+v keybinding), screenshot paste on Windows 11, and added support for dragging images from Windows Explorer</p>
|
||||
<p>• Improved performance of long and resumed conversations by eliminating redundant message-rendering recomputations</p>
|
||||
<p>• /terminal-setup now disables GPU acceleration in VS Code/Cursor/Windsurf integrated terminals to prevent garbled-text rendering</p>
|
||||
<p>• The Feature of the Week credit-claim status now appears as a notification in the status area instead of a line above the prompt</p>
|
||||
<p>• claude agents: slash-command autocomplete in the dispatch input now matches substrings</p>
|
||||
<p>• Removed the "bash commands will be sandboxed" startup banner — sandbox status still shows in /status and when a command is blocked</p>
|
||||
<p>• Removed the "/ide for …" startup hint toast</p>
|
||||
<p>• [IDE] Fixed clicking Stop while a background subagent is running not actually stopping it</p>
|
||||
<p>• [VSCode] Fixed the fast mode indicator not appearing on Opus 4.8</p>
|
||||
<p>• Pressing backspace right after a workflow trigger keyword now dismisses the workflow request (same as alt+w) instead of deleting a character</p>
|
||||
<p>• Added a "Workflow keyword trigger" setting in /config to stop the word "workflow" in a prompt from triggering a dynamic workflow</p></content>
|
||||
</entry>
|
||||
</feed>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "frontend-design",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"description": "Frontend design skill for UI/UX implementation",
|
||||
"author": {
|
||||
"name": "Prithvi Rajasekaran, Alexander Bricken",
|
||||
|
||||
@@ -1,42 +1,55 @@
|
||||
---
|
||||
name: frontend-design
|
||||
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
|
||||
description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
|
||||
license: Complete terms in LICENSE.txt
|
||||
---
|
||||
|
||||
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
|
||||
# Frontend Design
|
||||
|
||||
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
|
||||
Approach this as the design lead at a small studio known for giving every client a visual identity that could not be mistaken for anyone else's. This client has already rejected proposals that felt templated, and is paying for a distinctive point of view: make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take one real aesthetic risk you can justify.
|
||||
|
||||
## Design Thinking
|
||||
## Ground it in the subject
|
||||
|
||||
Before coding, understand the context and commit to a BOLD aesthetic direction:
|
||||
- **Purpose**: What problem does this interface solve? Who uses it?
|
||||
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
|
||||
- **Constraints**: Technical requirements (framework, performance, accessibility).
|
||||
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
|
||||
If the brief does not pin down what the product or subject is, pin it yourself before designing: name one concrete subject, its audience, and the page's single job, and state your choice. If there's any information in your memory about the human's preferences, context about what they're building, or designs you've made before – use that as a hint. The subject's own world, its materials, instruments, artifacts, and vernacular, is where distinctive choices come from. Build with the brief's real content and subject matter throughout.
|
||||
|
||||
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
|
||||
## Design principles
|
||||
|
||||
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
|
||||
- Production-grade and functional
|
||||
- Visually striking and memorable
|
||||
- Cohesive with a clear aesthetic point-of-view
|
||||
- Meticulously refined in every detail
|
||||
For web designs, the hero is a thesis. Open with the most characteristic thing in the subject's world, in whatever form makes sense for it: a headline, an image, an animation, a live demo, an interactive moment. Be deliberate with your choice: a big number with a small label, supporting stats, and a gradient accent is the template answer, only use if that's truly the best option.
|
||||
|
||||
## Frontend Aesthetics Guidelines
|
||||
Typography carries the personality of the page. Pair the display and body faces deliberately, not the same families you would reach for on any other project, and set a clear type scale with intentional weights, widths, and spacing. Make the type treatment itself a memorable part of the design, not a neutral delivery vehicle for the content.
|
||||
|
||||
Focus on:
|
||||
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
|
||||
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
|
||||
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
|
||||
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
|
||||
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
|
||||
Structure is information. Structural devices, numbering, eyebrows, dividers, labels, should encode something true about the content, not decorate it. Many generic designs use numbered markers (01 / 02 / 03), but that's only appropriate if the content actually is a sequence - like a real process or a typed timeline where order carries information the reader needs. Question if choices like numbered markers actually make sense before incorporating them.
|
||||
|
||||
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
|
||||
Leverage motion deliberately. Think about where and if animation can serve the subject: a page-load sequence, a scroll-triggered reveal, hover micro-interactions, ambient atmosphere. An orchestrated moment usually lands harder than scattered effects; choose what the direction calls for. However, sometimes less is more, and extra animation contributes to the feeling that the design is AI-generated.
|
||||
|
||||
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
|
||||
Match complexity to the vision. Maximalist directions need elaborate execution; minimal directions need precision in spacing, type, and detail. Elegance is executing the chosen vision well.
|
||||
|
||||
**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
|
||||
Consider written content carefully. Often a design brief may not contain real content, and it's up to you to come up with copy. Copy can make a design feel as templated as the design itself. See the below section on writing for more guidance.
|
||||
|
||||
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
|
||||
## Process: brainstorm, explore, plan, critique, build, critique again
|
||||
|
||||
For calibration: AI-generated design right now clusters around three looks: (1) a warm cream background (near #F4F1EA) with a high-contrast serif display and a terracotta accent; (2) a near-black background with a single bright acid-green or vermilion accent; (3) a broadsheet-style layout with hairline rules, zero border-radius, and dense newspaper-like columns. All three are legitimate for some briefs, but they are defaults rather than choices, and they appear regardless of subject. Where the brief pins down a visual direction, follow it exactly — the brief's own words always win, including when it asks for one of these looks. Where it leaves an axis free, don't spend that freedom on one of these defaults. Just like a human designer who's hired, there's often a careful balance between doing what you're good at and taking each project as a chance to experiment and learn.
|
||||
|
||||
Work in two passes. First, brainstorm a short design plan based on the human's design brief: create a compact token system with color, type, layout, and signature. Color: describe the palette as 4–6 named hex values. Type: the typefaces for 2+ roles (a characterful display face that's used with restraint, a complementary body face, and a utility face for captions or data if needed). Layout: a layout concept, using one-sentence prose descriptions and ASCII wireframes to ideate and compare. Signature: the single unique element this page will be remembered by that embodies the brief in an appropriate way.
|
||||
|
||||
Then review that plan against the brief before building: if any part of it reads like the generic default you would produce for any similar page (work through a similar prompt to see if you arrive somewhere similar) rather than a choice made for this specific brief — revise that part, say what you changed and why. Only after you've confirmed the relative uniqueness of your design plan should you start to write the code, following the revised plan exactly and deriving every color and type decision from it.
|
||||
|
||||
When writing the code, be careful of structuring your CSS selector specificities. It's easy to generate CSS classes that cancel each other out (especially with a type-based selector like .section and a element-based selector like .cta). This can happen often with paddings/margins between sections.
|
||||
|
||||
Try to do a lot of this planning and iteration in your thinking, and only show ideas to the user when you have higher confidence it'll delight them.
|
||||
|
||||
## Restraint and self-critique
|
||||
|
||||
Spend your boldness in one place. Let the signature element be the one memorable thing, keep everything around it quiet and disciplined, and cut any decoration that does not serve the brief. Not taking a risk can be a risk itself! Build to a quality floor without announcing it: responsive down to mobile, visible keyboard focus, reduced motion respected. Critique your own work as you build, taking screenshots if your environment supports it – a picture is worth 1000 tokens. Consider Chanel's advice: before leaving the house, take a look in the mirror and remove one accessory. Human creators have memory and always try to do something new, so if you have a space to quickly jot down notes about what you've tried, it can help you in future passes.
|
||||
|
||||
## More on writing in design
|
||||
|
||||
Words appear in a design for one reason: to make it easier to understand, and therefore easier to use. They are design material, not decoration. Bring the same intentionality to copy that you would bring to spacing and color. Before writing anything, ask what the design needs to say, and how it can best be said to help the person navigate the experience.
|
||||
|
||||
Write from the end user's side of the screen. Name things by what people control and recognize, never by how the system is built. A person manages notifications, not webhook config. Describe what something does in plain terms rather than selling it. Being specific is always better than being clever.
|
||||
|
||||
Use active voice as default. A control should say exactly what happens when it's used: "Save changes," not "Submit." An action keeps the same name through the whole flow, so the button that says "Publish" produces a toast that says "Published." The vocabulary of an interface is the signposting for someone navigating the product. Cohesion and consistency are how people learn their way around.
|
||||
|
||||
Treat failure and emptiness as moments for direction, not mood. Explain what went wrong and how to fix it, in the interface's voice rather than a person's. Errors don't apologize, and they are never vague about what happened. An empty screen is an invitation to act.
|
||||
|
||||
Keep the register conversational and tuned: plain verbs, sentence case, no filler, with tone matched to the brand and the audience. Let each element do exactly one job. A label labels, an example demonstrates, and nothing quietly does double duty.
|
||||
|
||||
Reference in New Issue
Block a user