Claude Code: Design Pro HTML Pages Without Coding

## 1. Introduction This video explains how to use Claude Code to design professional HTML pages from a non-professional's perspective, without writing a single line of code. Disclaimer: Released with the DP_IT video, free for use. Any resale or other commercial activities are prohibited. If someone sold this to you, please request a refund. Website: https://dpit.lib00.com ## 2. Resources Used in the Video > Download addresses for various resource libraries used: Quark Drive: https://pan.quark.cn/s/f4f50793599e Xunlei Cloud Drive: https://pan.xunlei.com/s/VOZKjrfVtyq61ruBxjtvVXacA1?pwd=hdqi UC Drive: https://drive.uc.cn/s/c80f9eadd69b4 Google Drive: https://drive.google.com/drive/folders/1XNeqyB2HMylWUccbxRjCqr4yq4PJpt2H > github: https://github.com/016/claude_code_101_html_design ## 3. Commands Used in the Video ### 1. Video List Page (f-video-list) Wireframe > //1. Generate video list page wireframe > //1.1 Generation mode without specific requirements /dp:UI:wireframe generate f-video-list > //1.2 Generation mode with specified requirements /dp:UI:wireframe generate f-video-list " -The layout should include a top navigation bar, a central content display area, and a bottom footer. -Top navigation bar -Logo area -Links to 3 website pages -User registration and login buttons -Dark/light theme switch button -i18n switch button -The bottom footer includes: -Display of conventional multiple groups of quick links to internal pages. -A quick email subscription area -Links to social media (mainly: YouTube, Bilibili, Douyin, QQ, WeChat, with a QR code image appearing on mouse hover for WeChat) -Copyright information section -The central content display area includes: -Video filtering area -Multi-select dropdown for video tags -Multi-select dropdown for video collections -Video keyword search box -Summary display of search results -Video display list -Use cards to display: (thumbnail, title, release date, author name, primary tag, collection tag, short description) -Pagination elements -A floating "back to top" button and a "contact us" button in the bottom right corner -And other elements that should appear on such a page " ### 2. Video List Page (f-video-list) HTML > //2.1 Initial creation /dp:UI:html create f-video-list " -Use the completed wireframe. @frontend-designs/wireframes/f-video-list_2.md -Generate HTML according to the requirements in the relevant documents. " > //2.2 Modification 1 /dp:UI:html update f-video-list " -Based on the completed HTML and related files. @frontend-designs/html/f-video-list_2.html -topbar -Cancel the fixed top bar; make it scroll with the page instead. -Use a white background for the topbar in the light theme. -Adjust the order of the buttons on the right to: switch language, switch style, login, register. -The style switch needs a dropdown menu, including dark, light, and auto options. -Video filtering section -Cancel JS-based filtering. Implement it as a form submission for server-side filtering with PHP. -Change tag and collection filters to multi-select. Use https://github.com/choices-js/choices, context7 MCP can be used here. -Remove the keyword search button. Add a search button using a Bootstrap input group, and activate form submission on Enter press. context7 MCP can be used here. -Remove the description of the current filter selection from the search results. This information should be displayed in the corresponding dropdowns and input boxes instead. -Adjust positions. Tags and collections should occupy one row, each taking 50% of the width. The area search and search results should occupy another row, each taking 50% of the width. -Video display area -Cancel JS-based pagination. Implement it as a URL GET parameter for server-side pagination with PHP. -Video card -Move the video release date and author to the same line, below the title. Add icons and reduce the font size. -Place the video description on the next line below the author, and add some more text content. -Move the video tags and collection tags to the card footer. Place tags on the left and collections on the right. -The pagination style is not good enough. Redesign it to be simple and consistent with the current style. -Footer -Remove the "Learning Resources" and "Help Center" columns from the quick links. Move the email subscription and social media up into the freed space. Quick links on the left, email subscription + social media on the right. " > //2.3 Modification 2 /dp:UI:html update f-video-list " -Based on the completed HTML and related files. @frontend-designs/html/f-video-list_3.html -Style-related -Globally modify CSS styles, changing the purple color for selected/active states to blue. -In dark mode, the colors of the topbar and footer are too similar to the background. Modify the dark mode colors to make the colors of different areas more harmonious. -choices-js/choices plugin bug -The following issues exist for both tag and collection filters. -Can query context7 MCP for this. -The dropdown menu for the tag filter is obscured by the video list below it. This issue exists in both dark and light themes. -There is a delete button on the top right corner of a selected item in the tag filter, but it is offset upwards and not centered. -The colors in the tag filter dropdown menu are abnormal. Currently, unselected items are purple and selected items are white. Change it so that unselected items are white and selected items use the page's standard color for selection. -The "Please select tags..." text in the tag filter input box is too jarring in dark mode. Try to fix the color to make it blend in better. -Video filtering section -Remove the area search. Move the keyword search from the right side over. Place the search results on the right, occupying the same row. -Video card -Change the top part to be the video cover image, not a video player link. -The spacing between the release date and the video title is too large; reduce it appropriately. -The buttons in the card footer look too cheap! Redo the style, change their shape to square. The colors also need to be changed to look more premium. -Footer -Add one more column to the quick links on the left. Reduce the email subscription area on the right by 50%, and use the freed space for the new quick links column. -Redo the style of all links in the footer. The current style is too plain; it needs a more premium feel. " > //2.4 Modification 3 /dp:UI:html update f-video-list " -Based on the completed HTML and related files. @frontend-designs/html/f-video-list_4.html -topbar -The text color inside navbar-brand and navbar-nav needs adjustment. It's acceptable in light mode, but not prominent enough in dark mode. Adjust it so the text is clear and blends well with the colors in both light and dark modes. -For the i18n switch, the dropdown-menu that appears on click is obscured by the video filter card below. Adjust it so the popup is above the filter card. The dark/light theme switch has the same issue; fix it as well. -choices-js/choices -I'm not satisfied with the color scheme of the multi-select boxes for video tags and collections using this plugin. Please try to modify it using the plugin's default colors to be compatible with the current theme. -Video filtering section -Change the keyword search to occupy half a row (col-md-6), and the search results behind it to also occupy half a row. -Video card -The cover image at the top should not have a play button on mouse hover, just display the cover image as a clickable link. Change the display resolution of the cover image to 304×171. -Modify the background color of the bottom card-footer to differentiate it from the video-info. Structurally, the card-footer should be a sibling of video-info; move it out of video-info. " > //2.5 Modification 4 /dp:UI:html update f-video-list " -Based on the completed HTML and related files. @frontend-designs/html/f-video-list_5.html -topbar -For the i18n switch button, the dropdown-menu popup that appears on click is partially blocked by the video filtering area card below. Adjust it so the popup is above the filter card. The dark/light theme switch popup has the same issue; fix it as well. -Multi-select boxes for video tags and video collections -Currently using choices-js/choices, the effect is not good. Remove this plugin completely (including all JS and CSS). -Implement the same functionality using native JS, with the main features as follows: -By default, display an input box with the text "Please select tags." -A multi-select dropdown menu appears on click. Options in the dropdown should include a checkbox and text. -Selection/deselection can be done by clicking either the checkbox or the text. -After selection, display the selected text and the count of selected items in the input box above. -Must be compatible with the existing form submission mode. -Must be compatible with the existing dark and light themes. -Video card -For the buttons in the bottom card-footer area, make the font thinner and slightly larger. It's too bold and the font is too small to see clearly now. " > //2.6 Modification 5 /dp:UI:html update f-video-list " -Based on the completed HTML and related files. @frontend-designs/html/f-video-list_6.html -In light mode, change the body background color to #e8e8e8. -Video filtering area -Remove the three labels: Tag Filter, Collection Filter, and Keyword Search. -Multi-select boxes for video tags and video collections -The dropdown menu only allows selection and deselection by clicking the checkbox of each item. Clicking the corresponding text does not perform the same action. Please modify it so that clicking the text also performs the same action. -The layout of the selected items (buttons) in the input box is abnormal. Because it uses the Flex property, it distributes automatically. Change it to be left-aligned. -Regarding the displayed selected buttons, show a maximum of 5, with the rest omitted. After the last button, display a number representing the total count of selected items. Show the total count when the number of selected buttons is greater than 0. -footer -The footer background color conflicts with the 5 H5 title colors. Please change the footer background color to a more suitable one, fully considering both light and dark themes. " > //2.7 Modification 6 /dp:UI:html update f-video-list " -Based on the completed HTML and related files. @frontend-designs/html/f-video-list_7.html -Multi-select boxes for video tags and video collections -The dropdown menu only allows selection and deselection by clicking the checkbox of each item. Clicking the text and the blank area of the corresponding item doesn't work. I want to be able to select and deselect by clicking anywhere on the dropdown-option. -The selected items and count are currently horizontally aligned to the right in the input box. Please fix this to be horizontally aligned to the left. -footer -For the WeChat button, display a QR code image on mouse hover/click. " > //2.8 Modification 7 /dp:UI:html update f-video-list " -Based on the completed HTML and related files. @frontend-designs/html/f-video-list_8.html -topbar -The Login and Register buttons are too big. Make them the same size as the theme switch button. -Multi-select boxes for video tags and video collections -There is a bug in the selection JS behavior. When a selection occurs, it adds two "selected-items": one is an empty tag, and the other is a display tag. When deselected, the display tag becomes an empty tag, and both exist as empty tags without being removed. The next time a selection occurs, it adds two more tags. The correct logic should be that there is always only one "selected-items". " > //2.9 Modification 8 /dp:UI:html update f-video-list " -Based on the completed HTML and related files. @frontend-designs/html/f-video-list_9.html - JS -Extract the common JS code as required and save it in a new file, main.js. This includes all JS code that can be shared across multiple pages. -In the video card -Rewrite the video-card using the Bootstrap card component, while keeping the existing style. -Rewrite the 3 tags in the card-footer using Bootstrap buttons. They should use `btn btn-outline-* btn-sm`. Ensure the colors blend well with the light and dark themes. " > //2.10 Modification 9 /dp:UI:html update f-video-list " -topbar -Increase the width of the Login and Register buttons to make them more aesthetically pleasing. -Based on the completed HTML and related files. @frontend-designs/html/f-video-list_10.html -The dropdown popups for the tag and collection filters are obscured by the video cards below when opened. Position the dropdown popups above the video cards to remove the obstruction. -In the video card -Keep the existing style for the 3 buttons in the card-footer. Change them to `<a>` tags to allow URL navigation for quick searching of the corresponding tag or collection. " ### 3. Video Detail Page (f-video-detail) Wireframe > //3.1. Generate video detail page wireframe /dp:UI:wireframe create f-video-detail " > 1. At a high level, it includes a topbar, footer, video detail display area, and auxiliary modules. 2. The video detail display includes: -Embedded/external video player -Title, release information, duration, tags, collection it belongs to -Video body/resource block (rich text HTML/MD) -On-site statistics (on-site view count; original platform statistics can be displayed) -Like, favorite (for logged-in users) -Comment section -Share buttons -At the bottom of this display module, set up a related video recommendation module. 3. Auxiliary modules include: -Latest announcements list -Related videos 4. I need you to create 2 iterations for me to choose from. Perform two independent designs and save them in two different files. " ### 4. Video Detail Page (f-video-detail) HTML > //4.1 Generate twice with regular settings /dp:UI:html create f-video-detail " -Use the completed wireframe. @frontend-designs/wireframes/f-video-detail_2_1.md -Copy styles from the completed video list page HTML and related files. @frontend-designs/html/f-video-list_10.html -Requires a complete copy of the topbar and footer. Background theme, colors, and all common element styles and JS code should be kept consistent site-wide. -Generate HTML according to the requirements in the relevant documents. -Create 2 iterations for me to choose from. -Additional requirements: -Add necessary icons to the text. -Use `btn btn-outline-* btn-sm` for buttons. -Try to make it concise and exquisite. -The video detail page will use a markdown string, placed directly into a `<div>` tag. " > //4.2 Generate two additional attempts /dp:UI:html create f-video-detail " -Use the completed wireframe. @frontend-designs/wireframes/f-video-detail_2_1.md -Create 2 iterations for me to choose from. "

# Claude Code: Design Pro HTML Pages Without Coding ## Video Overview This video provides a comprehensive demonstration of using Claude Code AI to create professional-grade HTML pages without writing a single line of code. The creator, DP, uses the redesign of their personal video publishing website DPIT as a real-world example, showcasing the complete process from wireframe design to full page implementation through natural language interaction. --- ## Core Content ### 1. Project Setup and Structure The video begins with an introduction to the project's fundamental structure: - **Claude.MD**: Main configuration file serving as the AI's "brain" - **PRD Document**: Product Requirements Document defining project rules and needs - **Frontend Design Directory**: Contains four subfolders for wireframes, HTML, CSS, and JavaScript - **Role Definitions**: Frontend engineer role and page identifiers defined in the rules folder ### 2. Design Workflow **Phase 1: Wireframe Generation** - Simple command format: `wireframe generate [page-identifier] [requirements]` - Two modes demonstrated: generation without specific requirements and with detailed specifications - Claude automatically generates structured wireframes based on PRD documentation - Wireframes include top navigation, filter area, video list, pagination, and footer **Phase 2: HTML Page Implementation** - HTML pages generated from wireframes using natural language instructions - First generation achieves basic layout and functional requirements - Includes advanced features like responsive design, day/night theme switching, and floating buttons ### 3. Iterative Optimization Process The video documents 10 iterations of refinement: **Iterations 1-2**: - Changed fixed navigation to scroll with page - Adjusted background colors and button order - Added theme switching dropdown menu - Cost: approximately $2.86 **Iterations 3-5**: - Optimized color scheme, removed purple theme - Fixed i18n plugin overlay issues - Adjusted video card thumbnail aspect ratio - Improved dark mode display **Iterations 6-8**: - Replaced third-party plugins with native JavaScript - Optimized multi-select checkbox interaction logic - Enhanced background color contrast - Added WeChat QR code display functionality **Iterations 9-10**: - Modularized JavaScript code - Unified visual style with square tags and sharp corners - Fine-tuned details for overall harmony ### 4. Video Detail Page Development After completing the list page, the creator demonstrated rapid detail page development: - Generated detail page wireframe - Showed how to quickly adjust by directly editing wireframe text - Created 4 different versions based on established design style - Selected the version that best fits the overall aesthetic for further development --- ## Technical Highlights 1. **Zero-Code Development**: Entire process uses natural language to interact with AI 2. **Rapid Iteration**: Each modification has clear requirements with decreasing scope 3. **Cost Control**: Using Claude Sonnet 4 model via API with transparent costs 4. **Visual Design**: Wireframes enable non-technical personnel to understand and participate 5. **Modular Thinking**: Separated JS and CSS following engineering standards --- ## Practical Recommendations ### For Beginners: - Prepare PRD documents and database structure (can use ChatGPT to generate) - Use clear file naming conventions for version management - Utilize `clear` command to manage context length - When encountering issues, ask AI to "think more carefully" ### Model Selection: - **Recommended**: Claude Sonnet 4 (best results) - **Alternatives**: DeepSeek v3.1, GLM (may require more iterations) - Domestic models are viable but may need additional debugging steps ### Iteration Strategy: - AI is a "tireless tool" that can regenerate infinitely - Generate multiple versions of the same requirement for comparison - Use version numbers to manage different iteration results - Small changes are more efficient when edited directly in wireframe text --- ## Project Achievements Final implementation includes: - ✅ Modern video list page with filtering, search, and pagination - ✅ Responsive design with day/night theme switching - ✅ Multi-language (i18n) support - ✅ Native JavaScript implementation with no redundant dependencies - ✅ Multiple design options for video detail page - ✅ Unified visual style and user experience --- ## SEO Keywords Claude Code, AI Programming, No-Code Development, Web Design, HTML Auto-Generation, Frontend Development, AI-Assisted Programming, Wireframe Design, Natural Language Programming, Claude Sonnet 4, Rapid Prototyping, DeepSeek AI, Website Design Tools, Low-Code Platform, AI Web Development, Visual Programming, Automated Coding, Web UI Design