Help me generate a static website.
Project Name: Poster-Generator
Technology Stack: HTML5/CSS3/Vanilla JavaScript (No Frameworks)
1. Purpose & Core Features
Core objective: To implement an AI poster generation tool similar to Xiaohongshu, with a focus on optimizing the following experience:
Dual column collaborative workflow: left parametric control panel (responsive layout)+right real-time visual preview (fixed 430px width)
Intelligent adaptation system: automatically detects screen size (desktop/mobile), with the mobile using the bottom control bar mode
Multi modal input support: Supports automatic conversion of Markdown syntax for titles/captions (such as # # title → h2 tag)
2. Visual System Optimized Edition
Color scheme:
Main color scheme:# FF6B6B (Little Red Book brand color)+# FFFFFF (background contrast)
Auxiliary color:# 4ECDC4 (emphasis color)# FFE66D (warning color)
Dynamic Gradient: Preview area background supports linear gradient generator (optional angle/color scale)
Component library specification:
Design system based on Atomic Design concept
Button interaction status:
Default state:# FF6B6B hover: #FF4757 active: #FF1B25
Disabled state:# CCCCCC with 10% opacity
Input box verification: Real time display of character count statistics (title limited to 50 words/body limited to 300 words)
3. Technical Requirements
Core functional modules:
Parameterized Configuration Panel
Dynamic Form Generator: Defining Parameter Structures through JSON Schema
Special field types:
Color selector (supporting HEX/RGB input)
Pattern uploader (limited to 5MB PNG/JPG)
Multi level dropdown selection (font family/layout style)
Real time rendering engine
Implementing responsive layout updates using ResizeObserver
Preview area rendering strategy:
Image generation function:
Advanced feature extensions
{AI assisted design:
Integrating OpenCV.js to Implement Intelligent Composition Suggestions (Text Layout Optimization)
Pattern generation API integration (such as DeepArt style transfer)}未实现
4. Accessibility & Internationalization
Accessibility standards:
WCAG 2.1 AA level compliance (contrast ratio ≥ 4.5:1)
Screen reader support (ARIA tag annotation)
Keyboard navigation optimization (Tab order logic)
Do we need to further discuss the specific technical implementation details or adjust the priority of functions?
代码返回在VS Code(便于调试,也可以直接保存本地.html文件或者在线工具)中创建Html、JS、CSS、font等文件,将DS/Cursor生成的代码 ⌘C + V 至代码容器。🌟
(Cursor生成的代码片段)
(VS Code)保存后预览
毫无意外的第一个版本,报错“文件协议限制“”路径引用错误“,检查调整路径,并重新预览…
[Error] Not allowed to load local resource: file:///Users/admin/Documents/cursor-post/styles.css (index.html, line 7)
[Error] Not allowed to load local resource: file:///Users/admin/Documents/cursor-post/script.js
[Error] Not allowed to load local resource: file:///favicon.ico
The distance between the image download button (indicate which button) and the upload file component is too small. I hope to increase it by 20px and align it in the center of the control panel container. After clicking with the mouse, there will be a darkened color feedback. To address the above issues, check the code structure, dependencies, and regenerate new HTML code.