Design Mirror
Skill Đã xác minhReplicate the visual style of any website and apply it to your existing codebase. Use this skill whenever the user wants to match a site's design, mirror a UI aesthetic, make their app look like another site, or replicate a specific visual style from a URL. Trigger on phrases like 'make it look like', 'match the design of', 'copy the style from', 'I want my app to look like X', 'mirror this design', 'inspired by [url]', or any time the user points at a website and says they want their frontend to match it.
This skill extracts design tokens such as colors, typography, and spacing from a target website using web scraping and screenshot analysis. It then provides guidance on how to apply these tokens to various frontend frameworks like React, Vue, Next.js, or plain CSS projects.
Documentation
- warning:Configuration & parameter referenceThe skill requires specific environment variables (BRIGHTDATA_API_KEY, BRIGHTDATA_UNLOCKER_ZONE) which are mentioned but lack a default value or explicit precedence order.
Security
- warning:Secret ManagementThe scripts reference BRIGHTDATA_API_KEY and BRIGHTDATA_UNLOCKER_ZONE as environment variables, which, if not handled carefully by the user, could lead to secrets being exposed.
Versioning
- warning:Release ManagementThere is no discernible versioning information (e.g., manifest version, git tags, CHANGELOG) for this skill, and installation instructions do not appear to reference a specific version, implying use of the main branch.
Code Execution
- warning:ValidationThe input URL is used directly in the curl command without explicit validation or sanitization against potentially malformed inputs.
- warning:Error HandlingThe bash scripts have basic error checking for curl commands and file existence, but lack detailed error categorization or structured reporting for the agent.
- warning:LoggingThere is no explicit logging of actions or outcomes to a local audit file; only basic echo statements to stderr are present.
Cài đặt
Hãy thêm marketplace trước
/plugin marketplace add brightdata/skills/plugin install brightdata-plugin@brightdata-pluginsTiện ích tương tự
Frontend Design
99Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.
Frontend Design
98Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Make Interfaces Feel Better
95Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.
Modern CSS
96Proactively apply when creating design systems, component libraries, or any frontend application. Triggers on CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, scroll-driven animations, view transitions, anchor positioning, popover, customizable select, content-visibility, logical properties, text-wrap, interpolate-size, clamp, field-sizing, modern CSS, CSS architecture, responsive design, dark mode, theming, design tokens, cascade layers. Use when writing CSS for any web project, choosing layout approaches, building responsive components, implementing dark mode or theming, creating animations or transitions, styling form elements, or modernizing legacy stylesheets. Modern CSS features and best practices for building interfaces with pure native CSS.
Color Palette Extractor
95Extract color palettes from images, websites, or designs. Identifies dominant colors, generates complementary schemes, and exports in multiple formats (HEX, RGB, HSL, Tailwind, CSS variables). Use when users need color schemes from images, brand colors, or design system palettes.
Frontend Design Skill
95Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.