skills.rest
seacen
seacenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

deckify

Generate an HTML-slide Design System markdown file from a website's visual language.

52|Updated Apr 27, 2026
Search Tags:#Design System#brand consistency#visual language#HTML slides#website analysis
One-click install
npx skills add https://github.com/seacen/deckify --skill deckify
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: deckify
Source: https://github.com/seacen/deckify/tree/main/skills/deckify
Command: npx skills add https://github.com/seacen/deckify --skill deckify

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agent-browser, python3, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automatically generates a complete HTML-slide Design System markdown file from a given website, allowing users to create brand-aligned slides with minimal effort.

Core Features & Use Cases

  • Design System Generation: Automatically extract a Design System from any website and save it as an markdown file.
  • Brand Consistency: Maintain consistent brand identity across all presentations by using the generated Design System.
  • Use Case: For example, a user can provide the URL of a company website and use this Skill to generate a Design System that can be used to create branded slides in HTML.

Quick Start

Use the deckify skill to generate a Design System from the website 'https://www.tiffany.com'.

Frequently Asked Questions about deckify

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract a visual design system from an existing website?▼

To extract a visual design system from a website, you can use a tool that fetches the URL, inspects computed CSS styles, and takes screenshots. This process captures the site's visual language and outputs a markdown file detailing the brand's design rules.

How do I create HTML slides that match my company's brand consistency?▼

Creating HTML slides with brand consistency involves generating a design system markdown file from your company website first. This file defines the visual language, enabling subsequent HTML slides to automatically align with the established brand identity.

Do I need Python and agent-browser to analyze a website's visual language?▼

Yes, analyzing a website's visual language for design system generation requires Python for script execution and file manipulation, alongside agent-browser for URL fetching, computed-style introspection, and capturing website screenshots.

Can I automatically generate a brand design system markdown file from any URL?▼

Yes, you can automatically generate a complete design system markdown file from any URL. The process introspects the target website's computed styles and visual elements to produce a comprehensive markdown reference for brand-aligned slide creation.

What is the best way to build a website visual language reference for presentations?▼

The best way to build a website visual language reference for presentations is to automatically extract computed styles and visual rules into a structured markdown file. This ensures your HTML slides maintain strict brand consistency without manual design auditing.

Related Skills

Explore More Design & Creative Skills→
lucasmccomblucasmccomb

design-review

Capture multi-viewport screenshots and analyze DOM, CSS, and computed styles for design issues.

Community
Advanced
ChrisTowlesChrisTowles
4

slidev

Create and edit Slidev presentation slides with Markdown and YAML frontmatter.

Community
Intermediate
vuminhieuvuminhieu

mermaidjs-v11

Render Mermaid.js v11 diagrams to SVG, PNG, or PDF via CLI.

Community
Intermediate
FirzusFirzus
1

extract-theme

Extract a website's visual theme into shadcn/ui and Tailwind CSS v4 tokens.

Community
Advanced