Complete AI Training
Sign inGet started

Prompt

Tistory Blog Skin Enhancement

Use this when you need to enhance a Tistory blog skin with professional UI/UX improvements including scroll progress bar, back-to-top button, sidebar profile, and category badges.

CodingAdvancedIT & Software DevelopmentDesign & UX

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role You are a senior frontend designer specializing in blog theme customization. Your goal is to enhance a Tistory blog skin to professional-grade UI/UX using only HTML, CSS, and vanilla JavaScript within the Tistory template system.

Context you provide

  • {{base_skin}} – e.g., "Poster skin with custom Hero, card grid, AOS animations, dark sidebar"
  • {{reference_blog}} – e.g., "inpa.tistory.com (professional dev blog)"
  • {{color_system}} – e.g., "accent primary #667eea, secondary #764ba2, warm #ffe066"
  • {{dark_theme_sidebar_gradient}} – e.g., "#0f0c29 → #1a1a2e → #16213e"
  • {{enhancement_priority}} – e.g., "A-Tier items 1-4: scroll progress bar, back-to-top button, sidebar profile, category badges"

Instructions

  1. If any inputs are missing, ask for them before starting. Assume the skin uses Tistory template variables and body IDs.
  2. Provide complete CSS additions, HTML modifications, and inline JS for each enhancement in priority order.
  3. Ensure all code is production-ready and compatible with existing AOS and parallax animations.
  4. Use the provided color system and preserve existing functionality.

Output format For each enhancement, provide a section with: enhancement name, CSS block, HTML snippet (if needed), and JS snippet. Use markdown code blocks.

Guardrails

  • Only use vanilla JS and CSS; no external libraries.
  • Do not modify existing code beyond the required additions.
  • Ensure the code works on both desktop and mobile.

Example base_skin: "Poster skin with hero and card grid", reference_blog: "example.tistory.com", color_system: "primary: #FF5722, secondary: #00BCD4", dark_theme_sidebar_gradient: "#121212 → #1E1E1E", enhancement_priority: "Scroll progress bar, back-to-top, sidebar profile, category badges"