Community画像github.com

pbakaus/bolder

安全または退屈なデザインを強化し、視覚的により面白く刺激的にします。使いやすさを維持しながらインパクトを高めます。ユーザーがデザインを「平坦」「無個性」「安全すぎる」「もっとインパクトが欲しい」と感じたときに使用します。

bolder とは?

pbakaus/bolder は、AI エージェント(Claude Code、Cursor、Codex など)向けに設計されたスキルで、ユーザーが提示したデザインを分析し、視覚的なインパクトと個性を高めるための具体的な変更提案を行います。このスキルは、「デザインが平坦すぎる」「無難すぎる」「退屈だ」といったフィードバックに対して、タイポグラフィ、色彩、レイアウト、コントラスト、装飾要素などを強化することで、元の使いやすさを損なわずにデザインをより刺激的で魅力的なものに変えることを目的としています。主に UI/UX デザインの改善を想定しており、AI エージェントが提供するデザイン案をユーザーの好みに合わせて調整する際に役立ちます。スキルの仕組みとしては、与えられたデザインの説明やコードを解析し、「安全だが退屈」と評価される部分を特定し、具体的なスタイル変更(フォントウェイトの変更、アクセントカラーの追加、余白の調整、装飾的な境界線や影の追加など)を提案します。これにより、開発者やデザイナーは、AI に生成させた初期デザインを、より人間味と個性のあるビジュアルに仕上げるための効率的な手段を得られます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/pbakaus/impeccable/tree/main/skills/bolder

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

bolder は何をしますか?

安全または退屈なデザインを強化し、視覚的により面白く刺激的にします。使いやすさを維持しながらインパクトを高めます。ユーザーがデザインを「平坦」「無個性」「安全すぎる」「もっとインパクトが欲しい」と感じたときに使用します。

使用方法

このスキルは、AI エージェントがデザインのフィードバックに応じて、以下のような変更を提案するために使用します。

  • タイポグラフィの強化(フォントウェイトの増加、サイズの拡大、文字間隔の調整)
  • 色彩の強調(アクセントカラーの追加、彩度の向上、コントラストの強化)
  • レイアウトの改善(余白の調整、グリッドの活用、非対称性の導入)
  • 装飾要素の追加(境界線、シャドウ、グラデーション、アイコンなど)

対象デザイン要素

このスキルは以下のデザイン要素に対して効果的です。

  • ボタンやリンクなどの操作要素
  • カードやコンテナなどのレイアウト要素
  • ヘッダーやフッターなどの情報構造
  • 色使いやフォント選択などのスタイル設定

注意事項

  • 元のユーザビリティを損なわないように変更を加えてください。
  • 過度な装飾は避け、デザインの目的に沿った強化を心がけてください。
  • ブランドガイドラインがある場合は、それに従った変更を提案してください。

例

ユーザー: 「このボタンデザイン、もっと目立たせたいけど、今のままだと平坦すぎる。」

改善提案:

  • 背景色をより鮮やかな色(例: #FF6B6B → #E63946)に変更
  • フォントウェイトを bold に変更
  • シャドウ効果(box-shadow: 0 4px 6px rgba(0,0,0,0.1))を追加
  • ホバー時のアニメーション効果(transform: scale(1.05))を追加

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

pbakaus/adapt

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.

pbakaus/animate

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.

pbakaus/arrange

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

pbakaus/audit

Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.

pbakaus/clarify

Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.

pbakaus/colorize

Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.

pbakaus/critique

Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.

pbakaus/delight

Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.

pbakaus/distill

Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.

pbakaus/extract

Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.

pbakaus/frontend-design

frontend-design — an installable skill for AI agents.

pbakaus/harden

Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.

pbakaus/impeccable

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

pbakaus/layout

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

pbakaus/normalize

Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.

pbakaus/onboard

Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows.

pbakaus/optimize

Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.

pbakaus/overdrive

Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.

pbakaus/polish

Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.

pbakaus/quieter

Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.

関連スキル