diff --git a/frontend/.mcp.json b/frontend/.mcp.json new file mode 100644 index 0000000..bd98b4f --- /dev/null +++ b/frontend/.mcp.json @@ -0,0 +1,11 @@ +{ + "mcpServers": { + "shadcn": { + "command": "npx", + "args": [ + "shadcn@latest", + "mcp" + ] + } + } +} diff --git a/frontend/index.html b/frontend/index.html index 0fca6f0..bbbb74b 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,10 +1,11 @@ - + - frontend + + CamTalk — AI 视觉对话助手
diff --git a/frontend/skills/redesign-skill.md b/frontend/skills/redesign-skill.md new file mode 100644 index 0000000..1f470c2 --- /dev/null +++ b/frontend/skills/redesign-skill.md @@ -0,0 +1,188 @@ +# Redesign Skill - Anti-Slop Frontend Framework + +> Source: https://github.com/Leonxlnx/taste-skill/tree/main/skills/redesign-skill +> Purpose: Audit and upgrade existing frontend code to eliminate generic AI-generated UI patterns. + +## How This Works + +When applied to an existing project, follow this sequence: + +1. **Scan** — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns. +2. **Diagnose** — Run through the audit below. List every generic pattern, weak point, and missing state you find. +3. **Fix** — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there. + +--- + +## Design Audit + +### Typography + +Check for these problems and fix them: + +- **Browser default fonts or Inter everywhere.** Replace with a font that has character. Good options: `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`. For editorial/creative projects, pair a serif header with a sans-serif body. +- **Headlines lack presence.** Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional. +- **Body text too wide.** Limit paragraph width to roughly 65 characters. Increase line-height for readability. +- **Only Regular (400) and Bold (700) weights used.** Introduce Medium (500) and SemiBold (600) for more subtle hierarchy. +- **Numbers in proportional font.** Use a monospace font or enable tabular figures (`font-variant-numeric: tabular-nums`) for data-heavy interfaces. +- **Missing letter-spacing adjustments.** Use negative tracking for large headers, positive tracking for small caps or labels. +- **All-caps subheaders everywhere.** Try lowercase italics, sentence case, or small-caps instead. +- **Orphaned words.** Single words sitting alone on the last line. Fix with `text-wrap: balance` or `text-wrap: pretty`. + +### Color and Surfaces + +- **Pure `#000000` background.** Replace with off-black, dark charcoal, or tinted dark (`#0a0a0a`, `#121212`, or a dark navy). +- **Oversaturated accent colors.** Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming. +- **More than one accent color.** Pick one. Remove the rest. Consistency beats variety. +- **Mixing warm and cool grays.** Stick to one gray family. Tint all grays with a consistent hue (warm or cool, not both). +- **Purple/blue "AI gradient" aesthetic.** This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent. +- **Generic `box-shadow`.** Tint shadows to match the background hue. Use colored shadows (e.g., dark blue shadow on a blue background) instead of pure black at low opacity. +- **Flat design with zero texture.** Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile. +- **Perfectly even gradients.** Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades. +- **Inconsistent lighting direction.** Audit all shadows to ensure they suggest a single, consistent light source. +- **Random dark sections in a light mode page (or vice versa).** A single dark-background section breaking an otherwise light page looks like a copy-paste accident. Either commit to a full dark mode or keep a consistent background tone throughout. If contrast is needed, use a slightly darker shade of the same palette — not a sudden jump to `#111` in the middle of a cream page. +- **Empty, flat sections with no visual depth.** Sections that are just text on a plain background feel unfinished. Add high-quality background imagery (blurred, overlaid, or masked), subtle patterns, or ambient gradients. Use reliable placeholder sources like `https://picsum.photos/seed/{name}/1920/1080` when real assets are not available. Experiment with background images behind hero sections, feature blocks, or CTAs — even a subtle full-width photo at low opacity adds presence. + +### Layout + +- **Everything centered and symmetrical.** Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content. +- **Three equal card columns as feature row.** This is the most generic AI layout. Replace with a 2-column zig-zag, asymmetric grid, horizontal scroll, or masonry layout. +- **Using `height: 100vh` for full-screen sections.** Replace with `min-height: 100dvh` to prevent layout jumping on mobile browsers (iOS Safari viewport bug). +- **Complex flexbox percentage math.** Replace with CSS Grid for reliable multi-column structures. +- **No max-width container.** Add a container constraint (around 1200-1440px) with auto margins so content doesn't stretch edge-to-edge on wide screens. +- **Cards of equal height forced by flexbox.** Allow variable heights or use masonry when content varies in length. +- **Uniform border-radius on everything.** Vary the radius: tighter on inner elements, softer on containers. +- **No overlap or depth.** Elements sit flat next to each other. Use negative margins to create layering and visual depth. +- **Symmetrical vertical padding.** Top and bottom padding are always identical. Adjust optically — bottom padding often needs to be slightly larger. +- **Dashboard always has a left sidebar.** Try top navigation, a floating command menu, or a collapsible panel instead. +- **Missing whitespace.** Double the spacing. Let the design breathe. Dense layouts work for data dashboards, not for marketing pages. +- **Buttons not bottom-aligned in card groups.** When cards have different content lengths, CTAs end up at random heights. Pin buttons to the bottom of each card so they form a clean horizontal line regardless of content above. +- **Feature lists starting at different vertical positions.** In pricing tables or comparison cards, the list of features should start at the same Y position across all columns. Use consistent spacing above the list or fixed-height title/price blocks. +- **Inconsistent vertical rhythm in side-by-side elements.** When placing cards, columns, or panels next to each other, align shared elements (titles, descriptions, prices, buttons) across all items. Misaligned baselines make the layout look broken. +- **Mathematical alignment that looks optically wrong.** Centering by the math doesn't always look centered to the eye. Icons next to text, play buttons in circles, or text in buttons often need 1-2px optical adjustments to feel right. + +### Interactivity and States + +- **No hover states on buttons.** Add background shift, slight scale, or translate on hover. +- **No active/pressed feedback.** Add a subtle `scale(0.98)` or `translateY(1px)` on press to simulate a physical click. +- **Instant transitions with zero duration.** Add smooth transitions (200-300ms) to all interactive elements. +- **Missing focus ring.** Ensure visible focus indicators for keyboard navigation. This is an accessibility requirement, not optional. +- **No loading states.** Replace generic circular spinners with skeleton loaders that match the layout shape. +- **No empty states.** An empty dashboard showing nothing is a missed opportunity. Design a composed "getting started" view. +- **No error states.** Add clear, inline error messages for forms. Do not use `window.alert()`. +- **Dead links.** Buttons that link to `#`. Either link to real destinations or visually disable them. +- **No indication of current page in navigation.** Style the active nav link differently so users know where they are. +- **Scroll jumping.** Anchor clicks jump instantly. Add `scroll-behavior: smooth`. +- **Animations using `top`, `left`, `width`, `height`.** Switch to `transform` and `opacity` for GPU-accelerated, smooth animation. + +### Content + +- **Generic names like "John Doe" or "Jane Smith".** Use diverse, realistic-sounding names. +- **Fake round numbers like `99.99%`, `50%`, `$100.00`.** Use organic, messy data: `47.2%`, `$99.00`, `+1 (312) 847-1928`. +- **Placeholder company names like "Acme Corp", "Nexus", "SmartFlow".** Invent contextual, believable brand names. +- **AI copywriting cliches.** Never use "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry", or "In the world of...". Write plain, specific language. +- **Exclamation marks in success messages.** Remove them. Be confident, not loud. +- **"Oops!" error messages.** Be direct: "Connection failed. Please try again." +- **Passive voice.** Use active voice: "We couldn't save your changes" instead of "Mistakes were made." +- **All blog post dates identical.** Randomize dates to appear real. +- **Same avatar image for multiple users.** Use unique assets for every distinct person. +- **Lorem Ipsum.** Never use placeholder latin text. Write real draft copy. +- **Title Case On Every Header.** Use sentence case instead. + +### Component Patterns + +- **Generic card look (border + shadow + white background).** Remove the border, or use only background color, or use only spacing. Cards should exist only when elevation communicates hierarchy. +- **Always one filled button + one ghost button.** Add text links or tertiary styles to reduce visual noise. +- **Pill-shaped "New" and "Beta" badges.** Try square badges, flags, or plain text labels. +- **Accordion FAQ sections.** Use a side-by-side list, searchable help, or inline progressive disclosure. +- **3-card carousel testimonials with dots.** Replace with a masonry wall, embedded social posts, or a single rotating quote. +- **Pricing table with 3 towers.** Highlight the recommended tier with color and emphasis, not just extra height. +- **Modals for everything.** Use inline editing, slide-over panels, or expandable sections instead of popups for simple actions. +- **Avatar circles exclusively.** Try squircles or rounded squares for a less generic look. +- **Light/dark toggle always a sun/moon switch.** Use a dropdown, system preference detection, or integrate it into settings. +- **Footer link farm with 4 columns.** Simplify. Focus on main navigational paths and legally required links. + +### Iconography + +- **Lucide or Feather icons exclusively.** These are the "default" AI icon choice. Use Phosphor, Heroicons, or a custom set for differentiation. +- **Rocketship for "Launch", shield for "Security".** Replace cliche metaphors with less obvious icons (bolt, fingerprint, spark, vault). +- **Inconsistent stroke widths across icons.** Audit all icons and standardize to one stroke weight. +- **Missing favicon.** Always include a branded favicon. +- **Stock "diverse team" photos.** Use real team photos, candid shots, or a consistent illustration style instead of uncanny stock imagery. + +### Code Quality + +- **Div soup.** Use semantic HTML: `
`, `
`, `
`, `
`, `